Description Allows rendering of Mustache.js.
Availability Stable
Required Script
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Examples None

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.1.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 - all decided by the target AMP element that uses this template to render its content.

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 =something> is not allowed.
  • Output arbitrary HTML using {{{unescaped}}}. The output of "triple-mustache" is sanitized to only allow formatting tags such as <b>, <i>, and so on.

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.