基于Json值呈现不同元素的amp-list

Question

我有一个很好很容易输出一堆div的amp-list，我唯一的问题是我希望第一个输出项有一些不同于其他项的属性。

下面是一个例子：

<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属性

Answer 1

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

为项目设置值，如"aria":"true"

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

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