amp-mustache

0.2 0.1

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

Permite el renderizado de las plantillas Mustache.js.

Notas de la versión

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 & (p. ej., " -> "). Una solución es utilizar caracteres similares, como ′ (′) y ″ (″).

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 {{ 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.