amp-mustache

0.2 0.1

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

版本说明

语法

Mustache 是一种无逻辑的模板语法。 有关更多详细信息，请参阅 Mustache 规范。 一些核心 Mustache 标签是

• {{variable}}: 一个变量标签。 它输出变量的 HTML 转义值。
• {{#section}} {{/section}}: 一个部分标签。 它可以测试变量是否存在，如果变量是数组，则可以遍历它。
• {{^section}} {{/section}}: 一个反向标签。 它可以测试变量不存在。
• {{{unescaped}}}: 未转义的 HTML。 它在可能输出的标记中受到限制（请参阅下面的“限制”）。

用法

amp-mustache 模板必须按照 AMP 模板规范 进行定义和使用。

首先，必须像这样声明/加载 amp-mustache

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

然后，可以在 script 或 template 标签中定义 Mustache 模板，如下所示

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

或

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

尽可能使用 template 标签，因为 AMP 验证提供了有用的开发提示。 对于表格上下文中模板的极端情况和问题，请使用 script 模板。 请参阅下面的“表格”部分。

如何发现模板，何时渲染模板，如何提供数据，这一切都由使用此模板渲染其内容的 AMP 目标元素决定（例如，在 amp-list、amp-form 等中）。

限制

验证

像所有 AMP 模板一样，amp-mustache 模板必须是格式正确的 DOM 片段。 这意味着，除其他外，您不能使用 amp-mustache 来

• 计算标签名称。 例如，不允许使用 <{{tagName}}>。
• 计算属性名称。 例如，不允许使用 <div {{attrName}}=something>。

“三重胡须”的输出经过清理，仅允许以下标签

a、article、aside、b、blockquote、br、caption、code、col、colgroup、dd、del、details、div、dl、dt、em、figcaption、figure、footer、h1、h2、h3、header、hr、i、ins、li、main、mark、nav、ol、p、pre、q、s、section、small、span、strong、sub、summary、sup、table、tbody、td、tfoot、th、thead、time、tr、u、ul。

清理

Mustache 输出经过清理，以确保安全并保持 AMP 有效性。 这可能会导致某些元素和属性被静默删除。

陷阱

嵌套模板

根据 AMP 验证，<template> 元素不得是其他 <template> 元素的子元素。 当嵌套使用模板的两个组件（例如 amp-list 和 amp-form）时，可能会发生这种情况。

为了解决这个问题，还可以通过组件上的 template 属性，通过 id 引用 <template> 元素。 例如

<amp-list id="myList" src="https://foo.com/list.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>

也可以表示为

<!-- 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>

表格

由于 AMP 模板字符串必须在 <template> 元素中指定，这可能会由于浏览器解析而导致意外行为。 例如，<table> 元素可能会导致文本的寄养。 在以下示例中

<template type="amp-mustache">
  <table>
    <tr>
{{#foo}}      <td></td>
{{/foo}}    </tr>
  </table>
</template>

浏览器将寄养文本节点 {{#foo}} 和 {{/foo}}

{{#foo}} {{/foo}}<table>
  <tr>
    <td></td>
  </tr>
</table>

解决方法包括将 Mustache 部分包装在 HTML 注释中（例如 <!-- {{#bar}} -->），使用非表格元素（如 <div>），或使用 <script type="text/plain"> 标签定义模板。

<script type="text/plain" template="amp-mustache">
  <table>
    <tr>
{{#foo}}<td></td>{{/foo}}
    </tr>
  </table>
</script>

引号转义

当使用 amp-mustache 计算属性值时，引号转义可能是一个问题。 例如

<template type="amp-mustache">
  <!-- 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: '{{bar}}'})">Click me</button>
</template>

在 {{foo}} 或 {{bar}} 变量中使用 HTML 字符代码将不起作用，因为 Mustache 会对 & 字符进行 HTML 转义（例如，" -> "）。 一种解决方法是使用仿造字符，例如 ′ (′) 和 ″ (″)。

HTML 实体

HTML 实体在 <template> 元素中不保留。

如果您想服务器端渲染包含用户生成文本的 <template>，这可能会成为一个问题，因为包含 {{、}}、{{{、}}} 的用户生成文本将被视为 Mustache 部分。 例如，将 {{ 替换为 HTML 实体 {{ 将不起作用，因为当浏览器解析 <template> 时，它们不会被保留。

解决方法包括将 {{ 之类的字符串替换为不同的字符，或直接从用户生成的内容中删除它们。

验证

请参阅 AMP 验证器规范中的 amp-mustache 规则。