amp-mustache

0.2 0.1

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

Ce composant autorise l'affichage de modèle Mustache.js.

Remarques relatives à la version

Syntaxe

Mustache est une syntaxe de modèle sans logique. Pour plus d'informations, consultez les documents relatifs à Mustache.js. Voici quelques-unes des principales balises de Mustache :

• {{variable}} : balise de variable. Affiche la valeur d'une variable avec échappement HTML.
• {{#section}}{{/section}}: balise de section. Permet de vérifier l'existence d'une variable et de la répéter s'il s'agit d'un tableau.
• {{^section}}{{/section}}: : balise inversée. Permet de vérifier qu'une variable n'existe pas.
• {{{unescaped}}} : balise HTML sans échappement. Elle est limitée dans le balisage qu'elle peut générer (voir la section "Restrictions" ci-dessous).

Utilisation

Le modèle amp-mustache doit être défini et utilisé conformément aux spécifications du modèle AMP.

Tout d'abord,amp-mustache doit être déclaré et chargé comme suit :

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

Ensuite, les modèles Mustache peuvent être définis dans une balise script ou template comme suit :

<!-- Utilisation de la balise template. -->
<template type="amp-mustache">
  Hello {{world}}!
</template>

ou

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

Dans la mesure du possible, utilisez la balise template, car la validation AMP fournit des indications dev-x utiles. Utilisez le modèle script pour les cas extrêmes et les problèmes liés à la création de modèles dans le contexte des tables. Pour en savoir plus, consultez la section "Tables" ci-dessous.

Le mode de détection des modèles, le moment où ils sont affichés et la manière dont les données sont fournies sont autant d'informations déterminées par l'élément AMP cible qui utilise ce modèle pour afficher son contenu (par exemple, dans un composant amp-list, amp-form, etc.).

Restrictions

Validation

À l'instar de tous les modèles AMP, les modèles amp-mustache doivent être des fragments DOM correctement formatés. Cela signifie notamment que vous ne pouvez pas utiliser amp-mustache pour les tâches suivantes :

• Calculer le nom de la balise. Par exemple, <{{tagName}}> n'est pas autorisé.
• Calculer le nom de l'attribut. Par exemple, <div {{attrName}}=something> n'est pas autorisé.

La sortie de "triple mustache" est expurgée afin de n'autoriser que les balises suivantes : 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.

Désinfection

La sortie de Mustache est désinfectée pour des raisons de sécurité, mais aussi pour maintenir la conformité avec AMP. Cela peut entraîner la suppression discrète de certains éléments et attributs.

Pièges

Modèles imbriqués

Conformément à la validation AMP, les éléments <template> ne peuvent pas être des enfants d'autres éléments <template>. Cela peut se produire lors de l'imbrication de deux composants qui utilisent des modèles ; amp-list et amp-form, par exemple.

Pour contourner ce problème, les éléments <template> peuvent également être référencés par id via l'attribut template sur le composant. Par exemple :

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

Peut également être représenté sous la forme :

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

Tables

Étant donné que les chaînes de modèle AMP doivent être spécifiées dans des éléments <template>, cela peut entraîner un comportement inattendu en raison de l'analyse du navigateur. Par exemple, les éléments <table> peuvent se traduire par l'adoption du texte (concept de foster parenting en anglais). Dans l'exemple suivant :

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

Le navigateur va adopter les nœuds de texte {{#foo}} et {{/foo}}:

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

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

Pour remédier au problème, vous pouvez encapsuler les sections Mustache dans les commentaires HTML (<!-- {{#bar}} -->, par exemple) en utilisant plutôt des éléments non table tels que <div> ou en utilisant une balise <script type="text/plain"> pour définir vos modèles.

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

Échappement de guillemets simples ou doubles

Lorsque vous utilisez amp-mustache pour calculer des valeurs d'attribut, l'échappement de guillemets simples ou doubles peut poser problème. Par exemple :

<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;})">Cliquer ici</button>
</template>

L'utilisation de codes de caractères HTML dans les variables {{foo}} et {{bar}} ne fonctionne pas, car Mustache interprète les caractères & en HTML (par exemple, " -> "). Une solution consiste à utiliser des caractères fac-similé ; par exemple, ′ (′) et ″ (″).

Il existe une proposition ouverte pour effectuer plutôt cette substitution dans le composant amp-mustache. N'hésitez pas à commenter le problème si vous souhaitez apporter votre aide.

Entités HTML

Les entités HTML ne sont pas conservées dans les éléments <template>.

Cela peut poser problème si vous souhaitez effectuer un rendu côté serveur d'un élément <template> contenant du texte généré par l'utilisateur, car le texte qui contient {{, }}, {{{, }}} sera traité comme une section Mustache. Par exemple, {{ ne peut pas être remplacé par les entités HTML {{, car elles ne sont pas conservées lorsque le navigateur analyse l'élément <template>.

Pour remédier à ce problème, vous pouvez remplacer des chaînes telles que {{ par des caractères différents ou les supprimer purement et simplement du contenu généré par l'utilisateur.

Validation

Consultez les règles relatives à amp-mustache dans les spécifications du validateur AMP.