AMP:使用amp-list按类别将数据分组

时间:2018-12-28 17:14:33

标签: c# html amp-html

我已经成功地使用amp-listamp-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"
  },
]

理想的结果:

enter image description here

0 个答案:

没有答案