amp-mustache

0.2 0.1

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

Memungkinkan rendering Mustache.js.

Catatan versi

Sintaks

Mustache adalah sintaks template tanpa logika. Lihat dokumen Mustache.js untuk penjelasan selengkapnya. Sebagian tag Mustache inti:

• {{variable}}: Tag variabel. Meng-output nilai HTML yang di-escape dari suatu variabel.
• {{#section}}{{/section}} : Tag bagian. Dapat menguji keberadaan variabel dan menjalankan iterasi jika tag berupa array.
• {{^section}}{{/section}}: Tag terbalik. Dapat menguji ketidakberadaan suatu variabel.
• {{{unescaped}}}: HTML yang tidak di-escape. Dibatasi dalam markup yang dapat di-output (lihat "Pembatasan" di bawah).

Penggunaan

Template amp-mustache harus ditentukan dan digunakan sesuai dengan Spesifikasi Template AMP.

Pertama, amp-mustache harus dinyatakan/dimuat seperti ini:

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

Kemudian, template Mustache dapat ditentukan dalam tagscript atau template seperti ini:

<!-- Using template tag. -->
<template type="amp-mustache">
  Hello {{world}}!
</template>

atau

<script type="text/plain" template="amp-mustache">
  Hello {{world}}!
</script>

Gunakan tag template jika memungkinkan, karena validasi AMP memberikan petunjuk dev-x yang berguna. Gunakan template script untuk kasus dan masalah ekstrem terkait penerapan template dalam konteks tabel. Lihat bagian "Tabel" di bawah.

Bagaimana template ditemukan, kapan template dirender, dan bagaimana data disediakan, semuanya ditentukan oleh elemen AMP target yang menggunakan template ini untuk merender kontennya (misalnya, dalam amp-list, amp-form, dll.).

Batasan

Validasi

Seperti semua template AMP, template amp-mustache harus berupa fragmen DOM dengan format yang tepat. Hal ini berarti, antara lain, Anda tidak dapat menggunakan amp-mustache untuk:

• Menghitung nama tag. Misalnya, <{{tagName}}> tidak diizinkan.
• Menghitung nama atribut. Misalnya, <div {{attrName}}=something> tidak diizinkan.

Output "triple-mustache" disanitasi untuk hanya mengizinkan tag berikut: 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.

Sanitasi

Output Mustache disanitasi karena alasan keamanan dan guna menjaga validitas AMP. Akibat proses ini, elemen dan atribut tertentu dapat terhapus tanpa diketahui.

Tantangan

Template bertingkat

Sesuai Validasi AMP, elemen <template> tidak boleh berupa turunan dari elemen <template> lain. Hal ini dapat terjadi saat dua komponen yang menggunakan template disusun bertingkat, misalnya amp-list dan amp-form.

Sebagai solusi, elemen <template> juga dapat direferensikan oleh id melalui atribut template pada komponen tersebut. Contoh:

<amp-list id="myList" src="https://foo.com/list.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>

Dapat juga ditampilkan sebagai:

<!-- Externalize templates to avoid nesting. -->
<template type="amp-mustache" id="myTemplate">
  <div>{{title}}</div>
</template>

<amp-list id="myList" src="https://foo.com/list.json" template="myTemplate">
</amp-list>

Tabel

Karena string template AMP harus ditetapkan dalam elemen <template>, perilaku yang tidak diharapkan mungkin terjadi akibat penguraian oleh browser. Misalnya, elemen <table> dapat menyebabkan foster parenting teks. Dalam contoh berikut:

<template type="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
  </tr>
</table>
</template>

Browser akan mem-foster parent node teks {{#foo}} dan {{/foo}}:

{{#foo}}
{{/foo}}

<table>
  <tr>
    <td></td>
  </tr>
</table>

Solusinya meliputi penggabungan bagian Mustache dalam komentar HTML (misalnya <!-- {{#bar}} --> ), penggunaan elemen non-tabel seperti <div> atau penggunaan <script type="text/plain"> untuk menentukan template Anda.

<script type="text/plain" template="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
  </tr>
</table>
</script>

Penghilangan tanda kutip

Saat menggunakan amp-mustache untuk menghitung nilai atribut, penghilangan tanda kutip dapat menjadi masalah. Contoh:

<template type="amp-mustache">
<!-- A double-quote (") in foo will cause malformed HTML. -->
<amp-img alt="{{foo}}" src="example.jpg" width="100" height="100"></amp-img>

<!-- A single-quote (') or double-quote (") in bar will cause an AMP runtime parse error. -->
<button on="tap:AMP.setState({foo: &#39;{{bar}}&#39;})">Klik saya</button>
</template>

Penggunaan kode karakter HTML dalam variabel {{foo}} atau {{bar}} tidak akan membantu karena Mustache akan meng-escape HTML & karakter (mis. " -> "). Salah satu solusinya adalah menggunakan karakter faksimile, misalnya ′ (′) dan ″ (″).

Ada usulan terbuka untuk melakukan penggantian ini pada amp-mustache saja. Berikan komentar Anda tentang masalah ini jika ingin memberikan dukungan.

Entity HTML

Entity HTML tidak dipertahankan dalam elemen <template>.

Hal ini dapat menjadi masalah jika Anda ingin merender sistem server <template> yang berisi teks buatan pengguna, karena teks buatan pengguna yang berisi {{, }}, {{{, }}} akan diperlakukan sebagai bagian Mustache. Misalnya, penggantian {{ dengan entity HTML {{ tidak akan berfungsi karena entity tersebut tidak dipertahankan saat browser mengurai <template>.

Solusinya meliputi mengganti string seperti {{ dengan karakter lain atau menghapusnya langsung dari konten buatan pengguna.

Validasi

Lihat aturan amp-mustache dalam spesifikasi validator AMP.