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>
Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.
Kunjungi Stack Overflow Fitur yang tidak dijelaskan?Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.
Edit sampel di GitHub-
Written by @jmadler