amp-list内で条件次第で出し分けする方法
amp-listはjsonを使用してリスト表示するパターンの使用が多いと思いますが、条件次第で出し分けしたいことがあると思います。
jsonに設定した項目だけで出し分けするのであれば簡単ですが、setStateで設定した値を使用して条件式に入れたいこともあるでしょう。
amp-list内にtemplateを設定すればsetStateの値を使用できる
結論、以下のようにtemplate属性を使用すれば、setStateで設定している値を使用することができます。
<amp-list layout="flex-item" src="/test.json" single-item items="." template="template-samples"> </amp-list> <template id="template-samples" type="amp-mustache"> <div [class]="'{{ testColumn }}' == binding.testValue ? 'classA' : 'classA hidden'"> ・ ・ </div> </template>
ポイントはtemplate属性に適当な値を設定し(上記の場合はtemplate-samples)、別でtemplate要素を作成してidにその適当な値(上記の場合はtemplate-samples)を設定することです。
上記の例のbinding.testValueはsetStateしている値であり、test.json内のtestColumnの値と一緒である場合とそうではない場合でclassの値を切り替えています。