AMPでCarouselを、Bindと連動させて動的に生成する方法 #AMP

11/2にGoogle Japan本社で行われたPWA/AMP Hackathonで作った制作物を共有したいと思います。
githubに公開しておりますので、実際に動かして試してみてください
amp-dynamic-carousel

やりたいこと

selectで選択したものを動的にデータを取得して、carouselで描画させたい

使用するampコンポーネント

amp-list
amp-bind
amp-mustache
amp-carousel

ハマったところ

amp-listとamp-carouselの関係性にちょっとつまずいた
amp-listの中にamp-carouselがあり、templateでamp-carouselごと要素を生成するという少々気持ち悪い実装となっている

index.html

<amp-list>

  <template type="amp-mustache">

    <amp-carousel>
      {{#values}}
        <div class="box_inner">
            # 省略
        </div>
      {{/values}}
    </amp-carousel>

  </template>

</amp-list>

{
 "items": [{
  "values": [
    {
      "title": "全国のデータ A",
      "comment": "テストデータAテストデータAテストデータAテストデータA",
      "img": "http://via.placeholder.com/210x150",
      "url": "#"
    }...
  ]
 }]
}

ロジック

amp-listでデータを取得し、amp-carouselごと回して要素を生成
jsonにvaluesという階層を一つ作ってあげることで、amp-carouselは一つだけ生成されvaluesの中の要素を生成

理想

index.html

<amp-carousel>

  <amp-list>

    <template type="amp-mustache">
      <div class="box_inner">
          # 省略
      </div>
    </template>

  </amp-list>

</amp-carousel>

amp-carouselの中にamp-listで要素を生成するという方法が理想なのかなと思いました。
上記の方法で実装するとampバリデーションは通るが、期待通りには描画されなかったです。
もしかしたら私の実装の仕方に誤りがあるかもしれませんので、その際はご指摘ください。

まとめ

少しトリッキーな方法ではありますが、これで動的なデータが描画できるカルーセルを作ることができます。
リアルタイムなデータが必要な場合はご参考ください。