Agregar amp-mustache ¿para qué sirve?


amp-mustache


Amp-mustache es un sistema de plantillas simples estructurado basado en el mustache.

Amp-mustache no proporciona datos, o compila una plantilla. En su lugar, se proporcionan los datos y la plantilla compilada por otras etiquetas AMP, como amp-access , amp-form y amp-list.

Disposición

Importe la etiqueta amp-mustache. Tendrá que hacer esto junto con cualquier otra etiqueta que su caso de uso requiera. Para los propósitos de este ejemplo, amp-list.


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


Datos

Los datos para amp-mustache plantillas de amp-mustache son proporcionados por otras etiquetas AMP. Para los propósitos de esta demo, estamos usando amp-list para pasar en un archivo JSON con un diccionario que se parece a esto:


{
    "fullname": "Jordan M Adler",
    "phonenumber": "212-555-1212",
    "cart_items": [
      {
        "name": "Pluot",
        "quantity": 5,
        "price": "$1.00"
      },
      {
        "name": "Apple",
        "quantity": 1,
        "price": "$3.25"
      }
    ],
    "address": {
      "addr1": "111 8th Ave",
      "city": "New York",
      "state": "NY",
      "zipcode": 10011
    }
  }


Variables

Las variables se interpolan cuando el nombre de la variable está rodeado entre paréntesis dobles ( {{varname}} )


Ejemplo

Hi Jordan M Adler!
<amp-list src="https://ampbyexample.com/json/cart.json"   layout="fixed-height"   height="56">   <template type="amp-mustache">     Hi {{fullname}}!   </template> </amp-list>

Condicionales

Los condicionales se llaman usando la misma sintaxis, pero con un octothorpe (#) prependido.


Ejemplo

The registered phone number is 212-555-1212
<amp-list src="https://ampbyexample.com/json/cart.json"   layout="fixed-height"   height="56">   <template type="amp-mustache">     {{#phonenumber}} The registered phone number is {{phonenumber}} {{/phonenumber}}   </template> </amp-list>

Para condicionales negativos en su lugar, inserte un cursor (^) antes del nombre de la variable.


Ejemplo

There is no registered twitter account for this profile
<amp-list src="https://ampbyexample.com/json/cart.json"   layout="fixed-height"   height="56">   <template type="amp-mustache">     {{^twitter}} There is no registered twitter account for this profile {{/twitter}   </template> </amp-list>

Loops

Los bucles usan la misma sintaxis como condicionales, pero funcionan cuando se proporcionan listas en lugar de variables escalares como cadenas, enteros y diccionarios.


Ejemplo

Pluot 5 $1.00 Apple 1 $3.25
<amp-list src="https://ampbyexample.com/json/cart.json"   layout="fixed-height"   height="80">   <template type="amp-mustache">     <div id="cart">       {{#cart_items}}       <div class="cart-item">         <span>{{name}}</span>         <span>{{quantity}}</span>         <span>{{price}}</span><       </div>       {{/cart_items}} {{^cart_items}} Your cart is empty! {{/cart_items}}     </div>   </template> </amp-list>



Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: