Skip to content

Latest commit

 

History

History
65 lines (46 loc) · 2.54 KB

amp-mustache.md

File metadata and controls

65 lines (46 loc) · 2.54 KB
Raw

amp-mustache

The amp-mustache allows rendering of Mustache.js templates.

Syntax

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

  • {{variable}} - variable tag. It outputs the the HTML-escaped value of a variable;
  • {{#section}}{{/section}} - section tag. It can test existance of a variable and iterate over it if it's an array;
  • {{^section}}{{/section}} - inverted tag. It can test non-existance 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 {{attrName}}=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.