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

PWA/AMP Hackathonで作った制作物を共有したいと思います。
githubに公開しておりますので、実際に動かして試してみてください
https://github.com/zonomaa/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ごと要素を生成するという少々気持ち悪い実装となっている

<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/210×150″,
　　　”url”: “#”
　　}…
　]
}]
}

ロジック

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

理想

<amp-carousel>

　<amp-list>

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

　</amp-list>

</amp-carousel>

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

まとめ

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