AMP

amp-mustache

Permite el renderizado de las plantillas Mustache.js.

Secuencia de comandos obligatoria
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
EjemplosConsulta el ejemplo comentado de amp-mustache de AMP By Example.

Notas de la versión

VersiónDescripción
0.2Se ha incluido la compatibilidad con los elementos <svg>; se ha reducido el tamaño del bundle a 12,2 KB (previamente 20,5 KB) y comprimido en formato gzip.Migra a una biblioteca de depuración HTML más moderna (antes Caja, ahora DOMPurify). Esto puede provocar pequeños puntos de ruptura debido a las diferencias en la inclusión en la lista blanca de atributos y etiquetas. Te recomendamos que pruebes primero las páginas antes de pasar a la fase de producción para asegurarte de que los cambios en el marcado generado no afectan a su funcionamiento.
0.1Implementación inicial.

Sintaxis

Mustache es una sintaxis de plantilla "sin lógica". Consulta la documentación de Mustache.js para obtener más información. Algunas de las etiquetas principales de Mustache son:

  • {{variable}}: etiqueta de variable. Genera el valor de una variable con formato de escape de HTML.
  • {{#section}}{{/section}}: etiqueta de sección. Puede comprobar la existencia de una variable y repetir la lógica si se trata de una matriz.
  • {{^section}}{{/section}}: etiqueta invertida. Puede comprobar la no existencia de una variable.
  • {{{unescaped}}}: HTML sin escape. Se aplican restricciones al marcado que puede generar (consulta la sección "Restricciones", que aparece más abajo).

Uso

La plantilla de amp-mustache debe definirse y utilizarse de acuerdo con las especificaciones de plantillas de AMP.

En primer lugar, amp-mustache debe declararse o cargarse de la siguiente manera:

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

A continuación, las plantillas de Mustache se pueden definir mediante una etiqueta script o template de la siguiente manera:

<!-- Con la etiqueta `template`. -->
<template type="amp-mustache">
  Hello {{world}}!
</template>

o

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

Utiliza la etiqueta template siempre que sea posible, ya que la herramienta de validación de AMP proporciona sugerencias útiles de dev-x. Utiliza la plantilla script para casos especiales y cuando hay problemas al generar plantillas a partir de tablas. Consulta la sección "Tablas" que aparece más abajo.

El elemento AMP que utiliza esta plantilla para renderizar su contenido (por ejemplo, amp-list, amp-form, etc.) decide cómo se descubren las plantillas, cuándo se renderizan y cómo se proporcionan los datos.

Restricciones

Validación

Como todas las plantillas de AMP, las de amp-mustache deben ser fragmentos DOM y tener el formato correcto. Esto quiere decir, entre otras cosas, que no puedes usar amp-mustache para:

  • Obtener un nombre de etiqueta; por ejemplo, no se admite el uso de <{{tagName}}>.
  • Obtener un nombre de atributo; por ejemplo, no se admite el uso de <div {{attrName}}=something>.

El resultado de "triple-mustache" se ha depurado para que solo admita las siguientes etiquetas: 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 y ul.

Depuración

Las plantillas de Mustache generadas se depuran por motivos de seguridad y para que se puedan utilizar con AMP. Esto puede provocar que ciertos elementos y atributos se eliminen sin avisar.

Problemas

Plantillas anidadas

De acuerdo con la validación de AMP, los elementos <template> no deben ser secundarios de otros elementos <template>. Esto puede ocurrir al anidar dos componentes que utilizan plantillas, como amp-list y amp-form.

Para solucionar este problema, se puede hacer referencia a un elemento <template> incluyendo su id en el atributo template del componente. Por ejemplo:

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

También se puede representar como:

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

Tablas

Dado que las cadenas de las plantillas de AMP deben especificarse en elementos <template>, el navegador puede funcionar de manera inesperada debido al análisis que lleva a cabo. Por ejemplo, los elementos <table> pueden causar foster parenting del texto. En el siguiente ejemplo:

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

El navegador hará un "foster parent" de los nodos de texto {{#foo}} y {{/foo}}:

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

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

Para solucionar este problema, se pueden encapsular las secciones de Mustache en comentarios HTML, como <!-- {{#bar}} -->; utilizar elementos que no sean de tabla para definir las plantillas, como <div>; o usar la etiqueta <script type="text/plain">.

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

Comillas de escape

Cuando se utiliza amp-mustache para calcular valores de atributo, las comillas de escape pueden dar problemas. Por ejemplo:

<template type="amp-mustache">
</template></p><!-- 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;})">Click me</button>
</template>

Utilizar códigos de carácter de HTML en las variables {{foo}} o {{bar}} no funcionará, ya que Mustache hará un escape HTML de los caracteres &amp; (p. ej., &quot; -> &amp;quot;). Una solución es utilizar caracteres similares, como ′ (&prime;) y ″ (&Prime;).

Hay una propuesta abierta para que se lleve a cabo esta sustitución en amp-mustache. Si te gusta la idea y quieres apoyarla, puedes dejar un comentario.

Entidades HTML

Las entidades HTML no se conservan en los elementos <template>.

Esto puede dar problemas si quieres que el servidor renderice una plantilla <template> que contiene texto generado por el usuario, porque si este contiene {{, }}, {{{ o }}}, se le tratará como una sección de Mustache. Por ejemplo, sustituir {{ por las entidades HTML &lcub;&lcub; no servirá, porque no se conservan cuando el navegador analiza <template>.

Entre las soluciones posibles está reemplazar las cadenas como {{ por caracteres diferentes o eliminarlas directamente del contenido generado por los usuarios.

Validación

Consulta las reglas de amp-mustache en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub