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="/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="/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="/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="/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>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub

Written by @jmadler