#BlackLivesMatter
AMP
  • email

amp-mustache

Introduction

amp-mustache templates are a simple, structured templating system based on mustache.

amp-mustache doesn't actually provide the data, or compile the template. Instead, the data is provided and template compiled by other AMP tags, such as amp-access, amp-form, and amp-list. For more information on those use cases, see those docs/samples directly.

Setup

Import the amp-mustache tag.

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

amp-mustache needs to be used along with other components, such as amp-list or amp-form. For the purposes of this sample, we'll use amp-list.

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

Data for amp-mustache templates are provided by other AMP tags. For the purposes of this demo, we're using amp-list to pass in a JSON file with a dictionary that looks like this:

{
  "items": [
    {
      "fullname": "John Doe",
      "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

Variables are interpolated when the variable name is surrounded in double curly brackets ({{varname}})

<amp-list src="https://amp.dev/static/samples/json/cart.json"
  layout="fixed-height"
  height="56"
  binding="no">
  <template type="amp-mustache">
    Hi {{fullname}}!
  </template>
</amp-list>

Conditionals

Conditionals are called using the same syntax, but with an octothorpe (#) prepended.

<amp-list src="https://amp.dev/static/samples/json/cart.json"
  layout="fixed-height"
  height="56"
  binding="no">
  <template type="amp-mustache">
    {{#phonenumber}}
      The registered phone number is {{phonenumber}}
    {{/phonenumber}}
  </template>
</amp-list>

Negative conditionals

For negative conditionals instead, insert a caret (^) before the variable name.

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

Loops

Loops use the same syntax as conditionals, but work when lists are provided instead of scalar variables such as strings, integers, and dictionaries.

<amp-list src="https://amp.dev/static/samples/json/cart.json"
  layout="fixed-height"
  height="80"
  binding="no">
  <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}}
        <div>Your cart is empty!</div>
      {{/cart_items}}
    </div>
  </template>
</amp-list>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub