- Aperçu
- Exemple simple
- Détails
- État
- Initialisation de l'état avec amp-state
- Actualisation de l'état
- Mise à jour de l'état avec AMP.setState()
- Modification de l'historique avec AMP.pushState()
- Expressions
- Différences par rapport à JavaScript
- Exemples
- Fonctions sur liste blanche
- Définir des macros avec amp-bind-macro
- Liaisons
- Attributs spécifiques aux éléments
- Débogage
- Avertissements
- Erreurs
- État de débogage
- Annexe
- Spécification de l'élément <amp-state>
- Traitements par lots de requêtes XHR
- Attributs
- Fusion en profondeur avec AMP.setState()
- Supprimer une variable
- Grammaire des expressions
amp-bind
Description
Autoriser la mutation des éléments en réponse aux actions de l'utilisateur ou à des modifications de données au moyen de la liaison de données et de simples expressions de type JS.
Required Scripts
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Ce composant ajoute une interactivité personnalisée en utilisant la liaison de données et des expressions.
| Script requis | <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> |
| Exemples | |
| Didacticiels | Créer des pages AMP interactives |
Aperçu
Le composant amp-bind vous permet d'ajouter une interactivité avec état personnalisée à vos pages AMP au moyen de la liaison de données et d'expressions de type JS.
Exemple simple
Dans l'exemple suivant, le fait d'appuyer sur le bouton remplace le texte "Hello World" de l'élément <p> par "Hello amp-bind".
<p [text]="'Hello ' + foo">Hello World</p>
<button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp-bind"</button>
Pour des raisons de performances et pour éviter un saut de contenu inattendu,
amp-bind n'évalue pas les expressions lors du chargement de la page. Cela signifie que les éléments visuels doivent être associés à un état par défaut et qu'il ne faut pas utiliser amp-bind pour l'affichage initial.