AMP教學-amp-mustache
先前曾經寫過一篇文章介紹如何用amp-list製作出推薦商品列表，當時已經應用了amp-mustache，此篇文章將更深入的講解各種寫法。
AMP-mustache允許支援 Mustache.js
這是一個可以產生字串js，讓json資料可以載入進template，html上面就會出現資料。amp-mustache主要可以帶入資料、判斷有無資料值、資料列表迴圈(通常和amp-list 配合)
在例如amp商品明細頁、購物車列表或是會員中心時，就可以帶入會員名稱、個人資料等。只要有使用到載入資料的部分，都會用到。
字串基本語法和說明
| 語法 | 說明 |
| {{variable}} | 基本資料呈現，傳入值的字串。 |
| {{#section}}{{/section}} | 區塊型的字串，可以判斷裡面有值存在，如果有值，並且裡面的值是群組化的，就會形成迴圈列表。 |
| {{^section}}{{/section}} | 與上述是反向的字串。可以判斷裡面值不存在。如果沒有值帶進來就會出現。(通常用在沒有值時出現警告訊息) |
| {{{unescaped}}} | 非轉譯的HTML，可能標記會受到限制 |
範例:
JS載入 amp-mustache和amp-list
| <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> |
amp-mustache目前來到0.2版，新增支持SVG元素、壓縮率更好，通常會和-- amp-list、amp-form 之類的搭配使用
如果只單純使用amp-mustache，僅能夠載入純文字資料，無法做列表或迴圈等。此次仍以列表類的為主來介紹，因此仍要載入amp-list。
json資料
先製作一個cart.json，在裡面寫入資料:
|
{ |
html範例
|
<!-- 單一變數示範 --> <!-- 判斷沒有值的時候 --> <!-- 迴圈示範 --> |
語法解釋
| 語法 | 說明 |
| {{fullname}} | 撈取json裡面的fullname ，網頁會呈現出 John Doe |
| {{#phonenumber}}~{{/phonenumber}} | 判斷json裡面phonenumber 有值嗎?，如果有值的話就出現以下這段 The registered phone number is {{phonenumber}} |
| {{^twitter}}~{{/twitter}} | 判斷json裡面 {{twitter}}沒有值(或沒有這個名稱)嗎? 沒有值的話就出現以下這段 There is no registered twitter account for this profile |
| {{#cart_items}} ~ {{/cart_items}} | 判斷json裡面cart_items 有值嗎?，如果有值的話就出現裡面內容，由於json的cart_items裡面還有多筆資料，html就會自動成為多筆，成為迴圈功能 |
限制
Tag Name：例如，不允許使用 <{{tagName}}>。
屬性名稱：例如，不允許使用<div {{attrName}}=something>。
系统會對“triple-mustache”進行排錯處理，因此允許以下標記：a、b、br、caption、colgroup、code、del、div、em、i、ins、li、mark、ol、p、q、s、small、span、strong、sub、sup、table、tbody、time、td、th、thead、tfoot、tr、u、ul。
<template>不得為子元素
根据 AMP 驗證，<template> 元素不得是其他 <template> 元素的子元素。因此在使用兩種模組時（例如 amp-list 和 amp-form）在網頁轉譯會出現<template＞脫離<amp-list＞不會在裡面一層。
為了解決這個問題，<template> 元素也可以通過組件 template 屬性由 id 引用。例如：
| <amp-list id="myList" src="https://foo.com/list.json"> <template type="amp-mustache"> <div>{{title}}</div> </template></amp-list> |
也可以表示為：
|
<template type="amp-mustache" id="myTemplate"> <amp-list id="myList" src="https://foo.com/list.json" template="myTemplate"></amp-list> |
由於這種脫離在表格上面會造成問題，因此要改用解決辦法
解決辦法包括将 Mustache 部分包含在 HTML 註釋（例如 <!-- {{#bar}} -->）、改用像 <div> 這樣的非表格元素，或者使用 <script type="text/plain"> 標記定義模板。
| <script type="text/plain" template="amp-mustache"> <table> <tr> {{#foo}}<td></td>{{/foo}} </tr> </table></script> |
引號使用
在 foo 中使用雙引號 (") 將導致 HTML 格式不正確，例如:
|
<template type="amp-mustache"> <!-- 在 bar 中使用單引號(') 或雙引號 (") 将導致 AMP 解析錯誤 --> <button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button></template> |
在 {{foo}} 或 {{bar}} 中使用 HTML 代碼將不會有作用，因為 Mustache 將會對 & 進行轉譯（例如 " -> &quot;）
更多的使用可以參考官方文件
