以下の内容はhttps://ti-tomo-knowledge.hatenablog.com/entry/2022/12/31/233315より取得しました。


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




以上の内容はhttps://ti-tomo-knowledge.hatenablog.com/entry/2022/12/31/233315より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14