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