amp-mustache
Description
Allows rendering of Mustache.js templates.
Required Scripts
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Contoh
Memungkinkan rendering Mustache.js.
Skrip yang Diperlukan | <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> |
Contoh | Lihat contoh amp-mustache beranotasi di AMP By Example. |
Catatan versi
Versi | Deskripsi |
---|---|
0.2 | Dukungan untuk elemen svg dan ukuran paket yang lebih kecil (12,2 KB vs 20,5 KB, kompresi gzip).Bermigrasi ke library sanitizer HTML yang lebih modern (dari Caja ke DOMPurify). Ada potensi terjadinya perubahan yang dapat menyebabkan gangguan minor akibat perbedaan persetujuan atribut dan tag. Sebaiknya uji halaman Anda terlebih dahulu sebelum mengirim ke produksi untuk memastikan perubahan pada markup yang dihasilkan tidak memengaruhi fungsionalitas. |
0.1 | Implementasi awal. |
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: '{{bar}}'})">Klik saya</button> </template>
Penggunaan kode karakter HTML dalam variabel {{foo}}
atau {{bar}}
tidak akan membantu karena Mustache akan meng-escape HTML &
karakter (mis. "
-> &quot;
). 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.
Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.
Kunjungi Stack Overflow Menemukan bug atau ada fitur yang kurang?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.
Kunjungi GitHub