This topic contains 0 replies, has 1 voice, and was last updated by  Moderator 3 weeks, 2 days ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #33181

    Moderator
    Member

    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-like expressions. This
    chapter discusses data binding in detail.

    To work with amp-bind, we need to add the following script to our page −

    
    

    Let us understand this fully with the help of a working example as shown −

    Example

    < !doctype html>
     amp lang = "en">
       
           charset = "utf-8">
          
          Google AMP - Amp Bind
           rel = "canonical" href = 
             "http://example.ampproject.org/article-metadata.html">
           name = "viewport" content = "width = device-width,
             minimum-scale = 1,initial-scale = 1">
          
          
             
          
          
          
       
       
          

    Google AMP - Amp Bind

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

    Output

     

    Click the button to see the text changing as shown below −

     

    Thus, in the example shown above we have used amp-bind to change the text on click of the button.

    Amp-bind has three components −

    • State − Initially the state is empty. Once you click the button the state is changed. For example,
    
    

    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 −

    Click on the button to change the text

    On click 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 −

    
       
    
    

    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 applied to special attributes in the form [attributes]. For example −

    Click on the button to change the text

    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 list shows suh components
    and attributes −

    Sr.No Amp component Attributes & Description
    1 [slide]*
    Change the slide using this binding behaviour
    2 [min]

    min -> Sets the earliest selectable date
    [max]
    max -> Sets the latest selectable date
    3 [src]
    Change src of iframe
    4 [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 [open]*
    You can show/hide lightbox by binding to open
    6 [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 [selected]*
    [disabled]

    Changes the currently selected children element(s) identified by
    their option attribute values. Supports a comma-separated list 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 −

    
       
    
    

    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>
     amp lang = "en">
       
           charset = "utf-8">
          
          Google AMP - Amp Bind
           rel = "canonical" href =
             "http://example.ampproject.org/article-metadata.html">
           name = "viewport" content = "width = device-width,
             minimum-scale = 1,initial-scale = 1">
          
          
             
          
          
          
       
       
          

    Google AMP - Amp Bind id = "myCarsList"> width = "300" height = "200" src = "images/bmw.jpg" [src] = "myCarsList[currentcar].imageUrl">

    [text] = "'This is a ' + currentcar + '.'"> This is a BMW.


    Output

     

    Click the button to see the image of the car changing and also the text below.

    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>
     amp lang = "en">
       
           charset = "utf-8">
          
          Google AMP - Amp Bind
           rel = "canonical" href =
             "http://example.ampproject.org/article-metadata.html">
           name = "viewport" content = "width = device-width,
             minimum-scale = 1,initial-scale = 1">
          
          
             
          
          
          
          
          
       
       
          

    Google AMP - Amp Bind

    id = "myList">

    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"> layout = "fill" src = "images/loading.jpg" placeholder > /amp-img>

    AMP - VIDEO id = "amp-video" src = "video/samplevideo.mp4" layout="responsive" [src] = "myList[currentlist].url" width = "300" height = "170" autoplay controls>

    Note that here we have used amp-state with iframesrc and video src.

     id = "myList">
       
    

    The currentlist is set to empty and on tap of the button, it is set
    to list1.The currentlist varaible is used for src of iframe and video as
    shown below −

     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">
           layout = "fill" src = "images/loading.jpg" placeholder>
          
    
     id = "amp-video" src = "video/samplevideo.mp4" 
       layout = "responsive" [src] = "myList[currentlist].url" width = "300" 
       height = "170" autoplay controls>
    

    Output

     

    Click the button to see the video and iframe src changing.

    Amp-bind with amp-lightbox

    Now, let us see the working of binding and amp-lightbox when used together.

    Example

    < !doctype html>
     amp lang = "en">
       
           charset = "utf-8">
          
          Google AMP - Amp Bind
           rel = "canonical" href =
             "http://example.ampproject.org/article-metadata.html">
           name = "viewport" content = "width = device-width,
             minimum-scale = 1,initial-scale = 1">
          
          
             
          
          
          
          
       
       
          

    Google AMP - Amp Bind

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

    To use binding on amp-lightbox, we have used [open] on amp-lightbox as shown below −

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

    The [open] = “displaylightbox” is a variable state is changed on
    click of button and on the tap of the lightbox div to true/false −

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

    Output

     

     

    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>
     amp lang = "en">
       
           charset = "utf-8">
          
          Google AMP - Amp Bind
           rel = "canonical" href=
             "http://example.ampproject.org/article-metadata.html">
           name = "viewport" content = "width = device-width,
             minimum-scale = 1,initial-scale = 1">
          
          
          
          
          
          
       
       
          

    Google AMP - Amp Bind

    AMP - Input Element

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

    Output

     

    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 −

    
    

     

     

     


    read about the latest technology trends and learn about new technologies, methodologies, and best practices through shared knowledge.

    This website – a collection of modded apk game apps for Android, Iphone smartphones & News Phones. These materials are taken from free Internet sources and can only be used for educational purposes!
    You can use it again like sharing friends or on social media, or for reviewing youtube videos etc.,

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.