amp-list 根据 Json 值呈现不同的元素答案

【问题标题】：amp-list to render different elements based on Json valueamp-list 根据 Json 值呈现不同的元素
【发布时间】：2018-08-04 11:02:51
【问题描述】：

我有一个 amp-list 可以轻松输出一堆 div，我唯一的问题是我希望第一个输出项具有与其他项不同的属性。

这是一个例子：

<amp-list layout="responsive" width="40" height="67" src="someurl"  items="." single-item=".">
 <template type="amp-mustache">  
     {{#NewsPaperPages}}
        <div role="tab" class="tabButton" option="{{PageNum}}" aria-selected="false" tabindex="0"></div>
      {{/NewsPaperPages}}
  </template>
</amp-list>

渲染到这个：

<div role="tab" class="tabButton" option="1" aria-selected="false" tabindex="0"></div>
<div role="tab" class="tabButton" option="2" aria-selected="false" tabindex="0"></div>
<div role="tab" class="tabButton" option="3" aria-selected="false" tabindex="0"></div>

但我希望第一项是：

<div role="tab" class="tabButton" option="1" aria-selected="true" tabindex="0" selected ></div>

其中aria-selected 设置为true 并添加了selected 属性

【问题讨论】：

标签： amp-html amp-list

【解决方案1】：

在您的amp-list JSON 文件中，添加一个通常格式的键/值对，例如"aria":" "。

为item设置值，如"aria":"true"

然后像这样设置amp-mustache 处理器：

<div role="tab" class="tabButton" option="{{PageNum}}" aria-selected="{{aria}}" tabindex="0">

【讨论】：