amp-mustache

0.2 0.1

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

Consente il rendering di Mustache.js.

Note sulla versione

Sintassi

Mustache è una sintassi template che non utilizza la logica. Per ulteriori informazioni, consulta i documenti di Mustache.js. Di seguito sono riportati alcuni dei principali tag Mustache:

• {{variable}}: tag variabile. Restituisce il valore di escape HTML di una variabile.
• {{#section}}{{/section}}: tag di sezione. Può verificare l'esistenza di una variabile e scorrerla se si tratta di un array.
• {{^section}}{{/section}}: tag invertito. Può verificare la non esistenza di una variabile.
• {{{unescaped}}}: HTML non escape. È limitato nel markup che potrebbe restituire (vedi "Restrizioni" di seguito).

Utilizzo

Il modello amp-mustache deve essere definito e utilizzato secondo le specifiche del modello AMP.

In primo luogo, amp-mustache deve essere dichiarato/caricato come segue:

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

I modelli Mustache possono essere quindi definiti in un tag 'script' o 'template' come questo:

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

oppure

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

Dove possibile, utilizza il tag template, poiché la convalida AMP fornisce utili suggerimenti dev-x. Utilizza il modello script per casi limite e problemi relativi ai modelli nel contesto delle tabelle. Consulta la sezione "Tabelle" di seguito.

Il modo in cui vengono scoperti i modelli, quando ne viene effettuato il rendering, come vengono forniti i dati: tutto viene deciso dall'elemento AMP target, che utilizza questo modello per renderizzarne i contenuti (ad esempio in un amp-list, amp-form e così via).

Restrizioni

Convalida

Come tutti i modelli AMP, i template amp-mustache devono essere frammenti DOM ben strutturati. Ciò significa che non puoi utilizzare amp-mustache, ad esempio, per:

• Calcolare il nome del tag. Ad esempio, <{{tagName}}> non è consentito.
• Calcolare il nome dell'attributo. Ad esempio, <div {{attrName}}=something> non è consentito.

L'output di "triple-mustache" è purificato e consente solo i seguenti tag: 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.

Purificazione

L'output di Mustache viene purificato per motivi di sicurezza e per mantenere la validità AMP. Ciò potrebbe comportare la rimozione non segnalata di alcuni elementi e attributi.

Problematiche

Modelli nidificati

Per la convalida AMP, gli elementi <template> non devono essere secondari di altri elementi <template>. Ciò potrebbe verificarsi quando si nidificano due componenti che utilizzano modelli, ad esempio amp-list e amp-form.

Per risolvere il problema, gli elementi <template> possono anche essere indicati tramite id mediante l'attributo template sul componente. Ad esempio:

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

Può anche essere rappresentato come:

<!-- 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>

Tabelle

Poiché le stringhe del modello AMP devono essere specificate negli elementi <template>, può verificarsi un comportamento imprevisto dovuto all'analisi del browser. Ad esempio, gli elementi <table> possono causare l'associazione con un elemento padre del testo. Nel seguente esempio:

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

Il browser creerà un'associazione con un elemento padre dei nodi di testo {{#foo}} e {{/foo}}:

{{#foo}}
{{/foo}}
<table>
  <tr>
    <td></td>
  </tr>
</table>

Le soluzioni alternative includono il ritorno a capo automatico delle sezioni Mustache nei commenti HTML (ad esempio <!-- {{#bar}} -->), l'uso di elementi non appartenenti a tabelle come <div> o l'uso di un tag <script type="text/plain"> per definire i modelli.

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

Escape delle virgolette

Quando utilizzi amp-mustache per calcolare i valori degli attributi, l'escape delle virgolette può essere un problema. Ad esempio:

<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}}'})">Click me</button>
</template>

L'uso di codici di caratteri HTML nelle variabili {{foo}} o {{bar}} non funzionerà perché Mustache imposta come escape HTML i caratteri & (ad esempio " -> "). Una soluzione alternativa consiste nell'utilizzo di caratteri facsimile, ad esempio ' (′) e " (″).

Esiste invece una proposta aperta per eseguire questa sostituzione in amp-mustache. Se vuoi sostenerla, scrivi un commento a riguardo.

Entità HTML

Le entità HTML non vengono mantenute negli elementi <template>.

Questo può essere un problema se vuoi eseguire il rendering lato server di un <template> contenente testo generato dall'utente, poiché il testo generato dall'utente contenente {{, }}, {{{, }}} verrà trattato come una sezione di Mustache. Ad esempio, sostituire {{ con le entità HTML {{ non funzionerà, perché queste non vengono mantenute quando il browser analizza il <template>.

Le soluzioni alternative includono la sostituzione di stringhe come {{ con caratteri diversi o l'eliminazione definitiva dai contenuti generati dall'utente.

Convalida

Consulta le regole amp-mustache nella specifica dello strumento di convalida AMP.