AMP

amp-mustache

Description

consente il rendering dei modelli Mustache.js.

 

Required Scripts

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

Consente il rendering di Mustache.js.

Script obbligatorio
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Esempi Vedi l'esempio di amp-mustache annotato di AMP By Example.

Note sulla versione

Versione Descrizione
0.2 Supporto per gli elementi <svg> e riduzione delle dimensioni dei gruppi (12,2 KB rispetto a 20,5 KB, compressione con gzip).

Esegue la migrazione a una più moderna libreria di strumenti di pulizia HTML (da Caja a DOMPurify). Per questo motivo, a causa delle differenze nelle allowlist di attributi e tag, potrebbero verificarsi lievi modifiche che provocano interruzioni. Ti consigliamo di verificare le pagine prima di passare alla produzione, per assicurarti che le modifiche al markup generato non influiscano sulla funzionalità.
0.1 Implementazione iniziale.

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 &amp; (ad esempio &quot; -> &amp;quot;). Una soluzione alternativa consiste nell'utilizzo di caratteri facsimile, ad esempio ' (&prime;) e " (&Prime;).

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 &lcub;&lcub; 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.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub