- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Data Binding
Amp-bind helps to add interactivity to the amp-components and html tags based on a action using data-binding and JS-pke expressions. This chapter discusses data binding in detail.
To work with amp-bind, we need to add the following script to our page −
<script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
Let us understand this fully with the help of a working example as shown −
Example
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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 + . "> Cpck on the button to change the text </p> <button on = "tap:AMP.setState({world: This is amp-bind example })"> Cpck Here </button> </body> </html>
Output
![Data binding](/google_amp/images/data_binding.jpg)
Cpck the button to see the text changing as shown below −
![Amp Data binding](/google_amp/images/amp_data_binding.jpg)
Thus, in the example shown above we have used amp-bind to change the text on cpck of the button.
Amp-bind has three components −
State − Initially the state is empty. Once you cpck the button the state is changed. For example,
<button on = "tap:AMP.setState({world: This is amp-bind example })"> Cpck Here </button>
AMP.setState method is used to change the state. The variable world is assigned the value This is amp-bind example. The variable world is used inside the html tag −
<p [text] = " Hello + world + . "> Cpck on the button to change the text </p>
On cpck of the button, world is assigned a new value: This is amp-bind example.
We can also use amp-state with binding as shown below −
<amp-state id = "myState"> <script type = "apppcation/json"> { "foo": "bar" } </script> </amp-state>
The expression will be assigned bmyState.foo during binding.
Expressions − The expressions for amp-bind to work is given as follows −
Hello + world
world is said to be a state variable.
Bindings − Bindings are appped to special attributes in the form [attributes]. For example −
<p [text] = " Hello + world + . "> Cpck on the button to change the text </p>
In the above example, [text] has the expression which is used for binding the p tag.
We can use the following attribute for bindings −
[text]
[class]
[hidden]
[width]
[height]
Bindings is also possible to be done on amp-components and only specific attributes are allowed. The following pst shows suh components and attributes −
Sr.No | Amp component | Attributes & Description |
---|---|---|
1 | <amp-carousel type=spdes> | [spde]*
Change the spde using this binding behaviour |
2 | <amp-date-picker> | [min]
min -> Sets the earpest selectable date [max]max -> Sets the latest selectable date |
3 | <amp-iframe> | [src]
Change src of iframe |
4 | <amp-img> | [alt]
[attribution]
[src]
[srcset]
We can change alt , attribution, src and srcset.If src is changed do change srcset as it is used for caching |
5 | <amp-pghtbox> | [open]*
You can show/hide pghtbox by binding to open |
6 | <amp-pst> | [src]
If expression is a string, fetches and renders JSON from the string URL. If expression is an object or array, renders the expression data. |
7 | <amp-selector> | [selected]*
[disabled]
Changes the currently selected children element(s) identified by their option attribute values. Supports a comma-separated pst of values for multiple selection |
Binding using Amp-State
We can define amp-state with all the data that we would want to use on html element or amp-component.
The data used inside amp-state has to be in json format as shown below −
<amp-state id = "myCarsList"> <script type = "apppcation/json"> { "currentcar" : "bmw", "audi": { "imageUrl": "images/audi.jpg" }, "bmw": { "imageUrl": "images/bmw.jpg" } } </script> </amp-state>
Thus, we have defined key-value pairs with the name of the car and the image used for the car.
Amp-bind on text and Amp-Image
A working example using amp-state with amp-bind is shown below −
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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 = "apppcation/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>
Output
![Amp Image Text](/google_amp/images/amp_image_text.jpg)
Cpck the button to see the image of the car changing and also the text below.
![Amp Image Texts](/google_amp/images/amp_image_texts.jpg)
Amp-bind on Video and IFrame
We will now see a working example which will change the amp-iframe and amp-video src.
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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({currentpst: pst1 })"> Cpck Here </button> <br/> <br/> <amp-state id = "myList"> <script type = "apppcation/json"> { "currentpst" : "", "pst1": { "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[currentpst].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[currentpst].url" width = "300" height = "170" autoplay controls> </amp-video> </body> </html>
Note that here we have used amp-state with iframesrc and video src.
<amp-state id = "myList"> <script type = "apppcation/json"> { "currentpst" : "", "pst1": { "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>
The currentpst is set to empty and on tap of the button, it is set to pst1.The currentpst varaible is used for src of iframe and video as shown below −
<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[currentpst].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[currentpst].url" width = "300" height = "170" autoplay controls> </amp-video>
Output
![Amp Video Iframe](/google_amp/images/amp_iframe_video.jpg)
Cpck the button to see the video and iframe src changing.
![Amp Video Iframe](/google_amp/images/amp_iframe_videos.jpg)
Amp-bind with amp-pghtbox
Now, let us see the working of binding and amp-pghtbox when used together.
Example
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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-pghtbox" src = "https://cdn.ampproject.org/v0/amp-pghtbox-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; } .pghtbox { background: rgba(211,211,211,0.8); width: 100%; height: 100%; position: absolute; display: flex; apgn-items: center; justify-content: center; } </style> </head> <body> <h3>Google AMP - Amp Bind</h3> <button on = "tap:AMP.setState({displaypghtbox: true})"> Cpck Here </button> <br/> <br/> <h3>AMP - Lightbox</h3> <amp-pghtbox id = "my-pghtbox" [open] = "displaypghtbox" layout = "nodisplay" close-button> <span class = "pghtbox" on = "tap:AMP.setState({displaypghtbox: false})"> <amp-img alt = "Beautiful Flower" src = "images/loreal.gif" width = "246" height = "205"> </amp-img> </span> </amp-pghtbox> </body> </html>
To use binding on amp-pghtbox, we have used [open] on amp-pghtbox as shown below −
<amp-pghtbox id = "my-pghtbox" [open] = "displaypghtbox" layout = "nodisplay" close-button> <span class = "pghtbox" on="tap:AMP.setState({displaypghtbox: false})"> <amp-img alt = "Beautiful Flower" src = "images/loreal.gif" width = "246" height = "205"> </amp-img> </span> </amp-pghtbox>
The [open] = “displaypghtbox” is a variable state is changed on cpck of button and on the tap of the pghtbox span to true/false −
<button on = "tap:AMP.setState({displaypghtbox: true})"> Cpck Here </button> <span class = "pghtbox" on = "tap:AMP.setState({displaypghtbox: false})"> <amp-img alt = "Beautiful Flower" src = "images/loreal.gif" width = "246" height = "205"> </amp-img> </span>
Output
![Amp Lightbox Bind](/google_amp/images/amp_pghtbox_bind.jpg)
Amp binding to Input element
Let us understand the working of amp-binding to the input element with the help of a working example as shown −
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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-pghtbox" src = "https://cdn.ampproject.org/v0/amp-pghtbox-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; } .pghtbox { background: rgba(211,211,211,0.8); width: 100%; height: 100%; position: absolute; display: flex; apgn-items: center; justify-content: center; } #txtname{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inpne-block; border: 1px sopd #ccc; border-radius: 4px; box-sizing: border-box; } span { font-size:25px; } </style> </head> <body> <h3>Google AMP - Amp Bind</h3> <button on = "tap:AMP.setState({displaypghtbox: true})"> Cpck Here </button> <br/> <br/> <h3> AMP - Input Element <h3> <input id = "txtname" placeholder = "Type here" on = "input-throttled:AMP.setState({name: event.value})"> <span [text] = "name"> </span> </body> </html>
Output
![Amp Input Element](/google_amp/images/amp_input_element.jpg)
The data entered inside the textbox is displayed at the bottom. It can be done by changing the state variable name on the input event as shown −
<input id = "txtname" placeholder = "Type here" on = "input-throttled:AMP.setState({name: event.value})"> <span [text] = "name"> </span>Advertisements