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>

Tags: Amp HTML en espanol

Share: