Description Allows rendering of Mustache.js.
Required Script
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Examples See AMP By Example's annotated amp-mustache example.

Version notes

Version Description
0.2 Support for <svg> elements and reduced bundle size (12.2KB vs. 20.5KB, gzipped).
Internal improvements may cause minor breaking changes; we recommend testing your pages before adoption.
0.1 Initial implementation.

Syntax

Mustache is a logic-less template syntax. See Mustache.js docs for more details. Some of the core Mustache tags are:

  • {{variable}}: A variable tag. It outputs the the HTML-escaped value of a variable.
  • {{#section}}{{/section}}: A section tag. It can test the existence of a variable and iterate over it if it's an array.
  • {{^section}}{{/section}}: An inverted tag. It can test the non-existence of a variable.

Usage

The amp-mustache template has to be defined and used according to the AMP Template Spec.

First, the amp-mustache has to be declared/loaded like this:

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

Then, the Mustache templates can be defined in the template tags like this:

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

How templates are discovered, when they are rendered, how data is provided is all decided by the target AMP element that uses this template to render its content (for example, in an amp-list, amp-form, etc.).

Restrictions

Like all AMP templates, amp-mustache templates are required to be well-formed DOM fragments. This means that among other things, you can't use amp-mustache to:

  • Calculate tag name. E.g. <{{tagName}}> is not allowed.
  • Calculate attribute name. E.g. <div {{attrName}}=something> is not allowed.
  • Output arbitrary HTML using {{{unescaped}}}. The output of "triple-mustache" is sanitized to only allow the following tags: a, b, br, caption, colgroup, code, del, div, em, i, ins, mark, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u.

Notice also that because the body of the template has to be specified within the template element, it is impossible to specify {{&var}} expressions - they will always be escaped as {{&amp;var}}. The triple-mustache {{{var}}} has to be used for these cases.

Validation

See amp-mustache rules in the AMP validator specification.