AMP: mustache template loop variable in amp-list?

534 Views Asked by At

I'm using amp-list together with amp-mustache templates to display a list of blog articles on my AMP page, like this example:

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="/data/blog-list.json"
>
  <template type="amp-mustache">
    <div class="blogitem blogitem--horizontal">
      <a href="{{url}}">{{title}}</a>
      ...
    </div>
  </template>
</amp-list>

However, I need the first item in my list to appear different than the others. I have slightly different html for the first item. Is there some kind of loop variable available that I can use to do something like this:

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="/data/blog-list.json"
>
  <template type="amp-mustache">
    {{#if loop->first}}
      <div class="blogitem blogitem--vertical">
        <a href="{{url}}">{{title}}</a>
        ...
      </div>
    {{#else}}
      <div class="blogitem blogitem--horizontal">
        <a href="{{url}}">{{title}}</a>
        ...
      </div>
    {{/if}}
  </template>
</amp-list>

Or is there another way to accomplish this?

Thanks!

0

There are 0 best solutions below