html - 使用 无法按预期处理动态数据

Question

我有我的 HTML:

<amp-list height="400" layout="fixed-height" src="data.json">
   <template type="amp-mustache">
      <amp-carousel height="200" layout="fixed-height" type="carousel">
         <amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
      </amp-carousel>
   </template>
</amp-list>

它应该显示一个轮播，其中包含我在 data.json 中指定的产品图片文件。但是，如果您看一下我的页面 here ，它没有像我预期的那样运行。我尝试删除动态函数并且它按预期工作，因此 <amp-list>正在混淆它。我关注了 AMP 元素 GitHub 上的问题:here , here , 和 here .

组件应该如下所示:

https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive

这是它目前的样子:

https://www.perfectimprints.com/amp/product/offering-buckets/

如有任何见解，我们将不胜感激。谢谢!

Answer 1

关键是在single-item 模式下使用 amp-list，然后手动迭代不同的元素:

<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
  <template type="amp-mustache">
    <amp-carousel type="slides" layout="fill">
      {{#items}}
      <amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
      {{/items}}
    </amp-carousel>
  </template>
</amp-list>

另一个技巧是让 amp-list 定义布局，然后使用轮播和图像的填充布局。