我已经成功地使用amp-list
和amp-mustache
构建了一个带有对象数组的简单JSON的列表,并且在JS中具有可用的版本,但尝试将其转换为AMP。
我正在尝试按每个项目的类别值对其进行分组。我无法弄清楚如何使其工作。任何建议将不胜感激!
下面是不带类别的列表的示例代码。
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<amp-list width="auto" height="140" layout="fixed-height" items="." src="/test-data">
<template type="amp-mustache">
<div class="col-12">
<a href="{{url}}">
<div class="d-flex">
<amp-img src="{{image}}" width="100" height="100"></amp-img>
<div class="col-8">
<h4>{{text}}</h4>
</div>
</div>
</a>
</div>
</template>
</amp-list>
示例JSON数据:
[
{
"url": "google.com",
"image": "https://picsum.photos/100",
"text": "Text Here",
"category": "A"
},
{
"url": "stackoverflow.com",
"image": "https://picsum.photos/100",
"text": "More Text Here",
"category": "B"
},
{
"url": "yahoo.com",
"image": "https://picsum.photos/100",
"text": "Some Text",
"category": "A"
},
]
理想的结果: