amp-list to render different elements based on Json value

Question

I have an amp-list that outputs bunch of divs nice and easy, my only problem is that I want the first output item to have some different attributes from others.

Here's an example:

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

which renders to this:

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

But I'd like the first item to be :

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

where aria-selected is set to true and selected attribute has added

Answer 1

In your amp-list JSON file, add a key/value pair in the usual format such as "aria":" ".

For the item, set the value, such as "aria":"true"

Then set your amp-mustache processor like this:

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