amp-mustache

Edit on Github
Open in Playground

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. You'll need to do this along with any other tags your use case requires. For the purposes of this sample, we'll use amp-list.

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

Data

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:

  {
    "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

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

Example

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

Conditionals

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

Example

<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>

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

Example

<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

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

Example

<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>