是否可以从 amp-list 中的 JSON 呈现 AMP 组件？答案

【问题标题】：Is it possible to render AMP components from JSON inside of amp-list?是否可以从 amp-list 中的 JSON 呈现 AMP 组件？
【发布时间】：2018-11-08 17:57:30
【问题描述】：

我正在创建一个 ASP.NET MVC 应用程序来转换来自内容管理系统的内容并将其呈现为符合 AMP 标准的页面。 CMS 有一个称为列表的概念，它将特定模板的内容项组合在一起，每个内容项都可以具有不同类型（纯文本、布尔值、HTML 等）的自定义字段。

amp-list 组件允许您使用三重花括号而不是双花括号来呈现原始 HTML，例如 {{{htmlProperty}}}。这通常有效，但我遇到了剥离图像的问题，即使我在服务器端修改它们以使用正确的 amp-img 语法。

我有以下 amp-list 组件：

<amp-list layout="fixed-height" height="500" src="https://jsonblob.com/api/jsonBlob/56eb207e-e2c3-11e8-a8cb-676415a24d50" single-item>
    <template type="amp-mustache">
        {{#contentItems}}
        <section>
            <header>
                {{title}}
            </header>
            <div>
                {{{content}}}
            </div>
        </section>
        {{/contentItems}}
    </template>
</amp-list>

我有以下示例 JSON：

{
  "totalRecords": 2,
  "pageSize": 0,
  "pageNumber": 1,
  "items": {
    "contentItems": [
      {
        "row": 1,
        "title": "What is your favorite sport?",
        "content": "<p><strong>Hockey</strong></p>"
      },
      {
        "row": 2,
        "title": "What is your favorite country?",
        "content": "<p>Canada</p><amp-img src=\"http://www.flagblvd.com/wp-content/uploads/2015/09/canadian-flag-medium.png\" alt=\"\" layout=\"fill\"></amp-img>"
      }
    ]
  }
}

请注意，title 属性是纯文本，而 content 是 HTML。加载页面时，第一个内容项中 <strong> 标记中的粗体可以正常工作，但如果您在浏览器的开发人员控制台中检查，您会注意到输出中省略了 amp-img。请参阅此jsfiddle 进行演示。

有没有办法让它正常工作？我在official documentation 中没有看到任何关于此的内容。我什至只是通过在an example 中看到它使用三重大括号来呈现原始 HTML，而没有相应的文档。

【问题讨论】：

标签： amp-html

【解决方案1】：

“triple-mustache”的输出被清理为仅允许以下标签：a、b、br、caption、caption、colgroup、code、del、@987654330 @,em,i,ins,li,mark,ol,p,q,@9876543@39@,@987654341,@,@987654341,@,@987654341 sub, sup, table, tbody, time, td, th, thead, tfoot, u@, tr, @98765434 p>

For More Information

【讨论】：

很遗憾，这是正确答案；我很惊讶 amp-* 组件未包含在可接受的标签列表中。我找到了一个ticket，表明这是设计使然。