Google AMP 放大器小胡子

我们使用amp-mustache来呈现 Mustache 模板。 amp-mustache 不提供它们由amp-list、amp-access或amp-form组件收集的 JSON 数据。

使用amp-list与字典一起传递的 JSON 文件示例。

Javascript

{
  "geeksforgeeks": [
    {
      "fullname": "geeksforgeeks",
      "phonenumber": "9999999999",
    }
  ]
}

所需脚本：将 amp-mustache 组件导入标头。

amp-mustache与 amp-list 或 amp-form 等组件一起使用以传递 JSON 文件（介绍后给出的示例）。

将 amp-list 组件导入标头。

将 amp-list 组件导入标头。

验证： amp-mustache 需要在框架良好的 DOM 片段中。所以我们不能将 amp-mustache 用于：

• 计算标签名称，例如 <{{tagName}}>
• 计算属性名

这些是不允许的

例子：

HTML

  

    
    Google AMP amp-mustache
  
    
  
    
  
    
    
      
    
    
    
  
    
    
      
    
        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
            }
        
    
    
    

  

    
          
        
    

  

输出：