amp-list для рендеринга различных элементов на основе значения Json

Question

У меня есть список усилителей, который выводит кучу дивов красиво и просто, моя единственная проблема в том, что я хочу, чтобы первый элемент вывода имел некоторые отличия от других.

Вот пример:

<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">