The AMP templates system allows AMP elements to render dynamic content using templates defined within the AMP document. The data for templates is received from a CORS JSON endpoint.
The templates are defined using a templating language exported by the AMP extended template. E.g. "amp-mustache" template is defined using Mustache.js syntax. However, any templating language has its syntax restricted and verified by AMP validator to ensure that XSS and other issues cannot be dynamically injected into the AMP document.
Before an AMP template can be used, it has to be declared in the document's head:
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>The script tag must be declared as async and with custom-template. See the
AMP Spec for more detail.
All AMP template implementations must go through AMP security review before they can be submitted to AMP repository.
The template can be defined anywhere in the AMP document's body like this:
<template type="amp-mustache">
Hello {{world}}!
</template>The type attribute must reference the template's type as defined in the custom-template attribute when
it's declared.
The use of the template is up to a specific AMP element that wants to use it. An AMP element would typically
look for a template within its children or using a template's ID. For instance, an amp-carousel element
may (in the future) use a CORS endpoint and an AMP template to load and render a dynamic set of slides.
AMP elements can use templates.renderTemplate methods to render a template. It is up to
a specific AMP element how templateElement and data are provided.
None yet. Coming soon.