Google AMP - Liaison de données

Amp-bind permet d'ajouter de l'interactivité aux amp-components et aux balises html en fonction d'une action utilisant la liaison de données et des expressions de type JS. Ce chapitre traite en détail de la liaison de données.

Pour travailler avec amp-bind, nous devons ajouter le script suivant à notre page -

<script async custom-element = "amp-bind" 
   src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>

Comprenons cela pleinement à l'aide d'un exemple de travail comme indiqué -

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href = 
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <p [text] = "'Hello ' + world + '.'">
         Click on the button to change the text
      </p>
      <button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
      Click Here
      </button>
   </body>
</html>

Production

Cliquez sur le bouton pour voir le texte changer comme indiqué ci-dessous -

Ainsi, dans l'exemple ci-dessus, nous avons utilisé amp-bind pour changer le texte en cliquant sur le bouton.

Amp-bind a trois composants -

  • State- Au départ, l'état est vide. Une fois que vous cliquez sur le bouton, l'état est modifié. Par exemple,

<button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
   Click Here
</button>

La méthode AMP.setState est utilisée pour changer l'état. La variableworld reçoit la valeur This is amp-bind example. La variableworld est utilisé dans la balise html -

<p [text] = "'Hello ' + world + '.'">
   Click on the button to change the text
</p>

En cliquant sur le bouton, une nouvelle valeur est attribuée à world: Ceci est un exemple d'amp-bind.

Nous pouvons également utiliser amp-state avec la liaison comme indiqué ci-dessous -

<amp-state id = "myState">
   <script type = "application/json">
      {
         "foo": "bar"
      }
   </script>
</amp-state>

L'expression sera attribuée bmyState.foo lors de la reliure.

  • Expressions - Les expressions permettant à amp-bind de fonctionner sont données comme suit -

'Hello ' + world

world est dit être un state variable.

  • Bindings- Les liaisons sont appliquées à des attributs spéciaux sous la forme [attributs]. Par exemple -

<p [text] = "'Hello ' + world + '.'">
   Click on the button to change the text
</p>

Dans l'exemple ci-dessus, [text] a l'expression qui est utilisée pour lier le p marque.

Nous pouvons utiliser l'attribut suivant pour les liaisons -

  • [text]
  • [class]
  • [hidden]
  • [width]
  • [height]

Les liaisons sont également possibles sur les composants d'ampli et seuls des attributs spécifiques sont autorisés. La liste suivante montre les composants et attributs suh -

Sr.Non Composant d'ampli Attributs et description
1 <amp-carousel type = slides> [slide]*

Modifier la diapositive à l'aide de ce comportement de liaison
2 <amp-date-picker> [min]

min -> Définit la première date sélectionnable

[max]

max -> Définit la dernière date sélectionnable
3 <amp-iframe> [src]

Changer le src de l'iframe
4 <amp-img> [alt] [attribution] [src] [srcset]

Nous pouvons changer alt, attribution, src et srcset.Si src est changé, modifiez srcset tel qu'il est utilisé pour la mise en cache
5 <amp-lightbox> [open]*

Vous pouvez afficher / masquer la lightbox en liant pour ouvrir
6 <amp-list> [src]

Si expression est une chaîne, récupère et restitue JSON à partir de l'URL de la chaîne. Si expression est un objet ou un tableau, restitue les données de l'expression.
sept <amp-selector> [selected]* [disabled]

Modifie le ou les éléments enfants actuellement sélectionnés identifiés par leurs valeurs d'attribut d'option. Prend en charge une liste de valeurs séparées par des virgules pour la sélection multiple

Liaison avec Amp-State

Nous pouvons définir amp-state avec toutes les données que nous voudrions utiliser sur l'élément html ou amp-component.

Les données utilisées dans amp-state doivent être au format json comme indiqué ci-dessous -

<amp-state id = "myCarsList">
   <script type = "application/json">
      {
         "currentcar" : "bmw",
         "audi": {
            "imageUrl": "images/audi.jpg"
         },
         "bmw": {
            "imageUrl": "images/bmw.jpg"
         }
      }
   </script>
</amp-state>

Ainsi, nous avons défini des paires clé-valeur avec le nom de la voiture et l'image utilisée pour la voiture.

Amp-bind sur texte et Amp-Image

Un exemple de travail utilisant amp-state avec amp-bind est présenté ci-dessous -

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}
         }
      </style>
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <amp-state id = "myCarsList">
         <script type = "application/json">
            {
               "currentcar" : "bmw",
               "audi": {
               "imageUrl": "images/audi.jpg",
               "style": "greenBackground"
               },
               "bmw": {
               "imageUrl": "images/bmw.jpg",
               "style": "redBackground"
               }
            }
         </script>
      </amp-state>
      <amp-img 
         width = "300" 
         height = "200" 
         src = "images/bmw.jpg" 
         [src] = "myCarsList[currentcar].imageUrl">
      </amp-img>
      <p [text] = "'This is a ' + currentcar + '.'">
         This is a BMW.
      </p>
      <br/>
      <button on = "tap:AMP.setState({currentcar: 'audi'})">
         Change Car
      </button>
   </body>
</html>

Production

Cliquez sur le bouton pour voir l'image de la voiture en train de changer ainsi que le texte ci-dessous.

Amp-bind sur vidéo et IFrame

Nous allons maintenant voir un exemple fonctionnel qui changera les src amp-iframe et amp-video.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <script async custom-element = "amp-video" src =
         "https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
      <script async custom-element = "amp-iframe" src =
         "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({currentlist: 'list1'})">
      Click Here
      </button>
      <br/>
      <br/>
      <amp-state id = "myList">
         <script type = "application/json">
            {
               "currentlist" : "",
               "list1": {
                  "url": "video/m.mp4",
                  "style": "greenBackground",
                  "iframeurl":"https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
               }
            }
         </script>
      </amp-state>
      <h3>AMP - IFRAME</h3>
      <amp-iframe 
         width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0"
         src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
         [src] = "myList[currentlist].iframeurl">
         <amp-img 
            layout = "fill" 
            src = "images/loading.jpg" 
            placeholder
            >
         /amp-img>
      </amp-iframe>
      <h3>AMP - VIDEO</h3>
      <amp-video 
         id = "amp-video" 
         src = "video/samplevideo.mp4" 
         layout="responsive" 
         [src] = "myList[currentlist].url" 
         width = "300" 
         height = "170" autoplay controls>
      </amp-video>
   </body>
</html>

Notez qu'ici nous avons utilisé amp-state avec iframesrc et video src.

<amp-state id = "myList">
   <script type = "application/json">
      {
         "currentlist" : "",
         "list1": {
            "url": "video/m.mp4",
            "style": "greenBackground",
            "iframeurl":"
            https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
         }
      }
   </script>
</amp-state>

La liste actuelle est définie sur vide et en appuyant sur le bouton, elle est définie sur list1. La liste actuelle est utilisée pour le src d'iframe et la vidéo comme indiqué ci-dessous -

<amp-iframe width="600"
   title = "Google map"
   height = "400"
   layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
   [src] = "myList[currentlist].iframeurl">
      <amp-img layout = "fill" src = "images/loading.jpg" placeholder>
      </amp-img>
</amp-iframe>
<amp-video id = "amp-video" src = "video/samplevideo.mp4" 
   layout = "responsive" [src] = "myList[currentlist].url" width = "300" 
   height = "170" autoplay controls>
</amp-video>

Production

Cliquez sur le bouton pour voir la vidéo et iframe src changer.

Amp-bind avec amp-lightbox

Voyons maintenant le fonctionnement de la reliure et de l'ampli-lightbox lorsqu'ils sont utilisés ensemble.

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href =
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <script async custom-element = "amp-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
      Click Here
      </button>
      <br/>
      <br/>
      <h3>AMP - Lightbox</h3>
      <amp-lightbox 
         id = "my-lightbox" 
         [open] = "displaylightbox" 
         layout = "nodisplay" 
         close-button>
         <div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
            <amp-img alt = "Beautiful Flower"
               src = "images/loreal.gif"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

Pour utiliser la liaison sur amp-lightbox, nous avons utilisé [open] sur amp-lightbox comme indiqué ci-dessous -

<amp-lightbox id = "my-lightbox" [open] = "displaylightbox" 
   layout = "nodisplay" close-button>
   <div class = "lightbox" on="tap:AMP.setState({displaylightbox: false})">
      <amp-img alt = "Beautiful Flower"
         src = "images/loreal.gif"
         width = "246"
         height = "205">
      </amp-img>
   </div>
</amp-lightbox>

Le [open] = "displaylightbox" est un état variable qui est changé en cliquant sur le bouton et en tapant sur le div lightbox en vrai / faux -

<button on = "tap:AMP.setState({displaylightbox: true})">
   Click Here
</button>

<div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
   <amp-img alt = "Beautiful Flower"
      src = "images/loreal.gif"
      width = "246"
      height = "205">
   </amp-img>
</div>

Production

Liaison d'ampli à l'élément d'entrée

Comprenons le fonctionnement de la liaison amp à l'élément d'entrée à l'aide d'un exemple de travail comme indiqué -

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href=
         "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
      <style amp-boilerplate> 
         body{
            -webkit-animation:none;
            -moz-animation:none;
            -ms-animation:none;
            animation:none
         }
      </style>
      <noscript>
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
         <script>
         <script async custom-element = "amp-lightbox" 
            src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>
      <h3>
         AMP - Input Element
      <h3>
      <input id = "txtname" placeholder = "Type here" 
         on = "input-throttled:AMP.setState({name: event.value})">
      <div [text] = "name">
      </div>
   </body>
</html>

Production

Les données saisies dans la zone de texte sont affichées en bas. Cela peut être fait en changeant la variable d'étatname sur l'événement d'entrée comme indiqué -

<input id = "txtname" placeholder = "Type here" on = 
"input-throttled:AMP.setState({name: event.value})">
<div [text] = "name">
</div>