Google AMP 的 amp-bind 中的初始化状态是什么？

amp-bind 的制作方式使得任何使用它的文档都具有可变的 JSON 数据或状态。可以使用 amp-state 操作此数据。您的数据不会在页面加载时评估，而是与用户输入一起动态评估。它有各种状态，它们有自己的变量。在本文中，我们将讨论元素的初始状态。

amp-state 变量的初始值始终为 NULL，但可以在用户与页面交互时更改。

设置：要在我们的 AMP 页面中使用 amp-bind-macro，我们必须在文档头部导入 amp-bind 脚本。

例子：

HTML

  

    
    Google AMP amp-bind
  
    
  
    
  
    
    
  
    
    
    
  
    
        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
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
      
    
        h1 {
            color: forestgreen;
            text-align: center;
        }
    

  

    
        
            
                "Geek"
            
        
        1. Hello 
                Geek
        
        2. Hello 
                Geek
        
        
        
            Change state
        
    

  

输出：

在上面的示例中，一个问候语通过 JSON字符串绑定在 amp-state 内。当用户触发 AMP.setState(...) 操作时，将评估两个绑定，导致第一个绑定显示空值。