親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

amp-list内でsetStateで設定した値を使用する方法

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の値を切り替えています。