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> このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-