我正在手动将珠宝电子商务产品页面移植到 AMP。我需要组合多个独立的 AMP 状态（宝石形状、克拉重量、贵金属），然后使用结果作为 array.filter() 的输入来过滤我的 JSON 以获得动态 AMP 轮播。
所需的用户体验：如果用户单击“黄色金色”按钮，然后单击“2 克拉”按钮，我想将图像（在下面的 JSON 数组中）过滤为仅通过 object.metal == 过滤器的对象_y' && object.ctw == '_2-0'
使用简单的 onClick Javascript 很容易做到，但我不确定如何使用 tap:AMP.setState 执行这个多步骤逻辑。因此，我正在寻求帮助，将多个变量组合成一个 AND 语句，然后在 array.filter() 中使用该语句来刷新 AMP-Carousel 以匹配用户的选择。
我使用一个变量正确刷新/更新了 AMP-Carousel，如下所示：
<button on="tap:AMP.setState({ filteredProducts: { values : galleryItems.items[0].values.filter(a => a.metal == '_r')}})">Rose Gold</button>
如何将我的 setState 扩展到两个离散的目标？
- 根据用户选择的选项生成更新的“myFilter”
- 将“filteredProducts”设置为 values.filter(a => myFilter)
这是我的 AMP-Carousel 以及我的 JSON（希望这有助于其他与上述问题无关的人！）
<amp-list id="galleryList" width="1000" height="1000" layout="responsive" src="/path/to/my/initial/json"[src]="filteredProducts" binding="no">
<template type="amp-mustache">
<amp-carousel class="pdp-gallery-carousel" layout="responsive" width="1000" height="1000" type="slides" controls="" loop="">
{{#values}}
<div class="pdp-gallery-inner">
{{^isVideo}}
<amp-img class="pdp-gallery-image" src="{{src}}" layout="intrinsic" width="{{width}}" height="{{height}}" srcset="{{srcset}}"></amp-img>
{{/isVideo}}
{{#isVideo}}
<amp-youtube data-videoid="{{ytID}}" layout="responsive" width="480" height="270" autoplay="" loop=""></amp-youtube>
{{/isVideo}}
</div>
{{/values}}
</amp-carousel>
</template>
<amp-list>
注意 - 我知道这个 JSON 有点古怪，但这是我发现让 AMP-Carousel 在 AMP-Mustache 中工作的唯一方法。
<amp-state id="galleryItems">
<script type="application/json">
{
"items":[
{
"values":[
{
"id":0,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_0-70",
"width":"1200",
"height":"1200"
},
{
"id":1,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_y",
"ctw":"_0-70",
"width":"1200",
"height":"1200"
},
{
"id":2,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_0-70",
"width":"1200",
"height":"1200"
},
{
"id":3,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_0-70",
"width":"2500",
"height":"2500"
},
{
"id":4,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_0-70",
"width":"2500",
"height":"2500"
},
{
"id":5,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_wgp",
"ctw":"_1-0",
"width":"1200",
"height":"1200"
},
{
"id":6,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_y",
"ctw":"_1-0",
"width":"1200",
"height":"1200"
},
{
"id":7,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_1-0",
"width":"1200",
"height":"1200"
},
{
"id":8,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_wgp",
"ctw":"_2-0",
"width":"1200",
"height":"1200"
},
{
"id":9,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_y",
"ctw":"_2-0",
"width":"1200",
"height":"1200"
},
{
"id":10,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_2-0",
"width":"1200",
"height":"1200"
},
{
"id":11,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_0-70",
"width":"813",
"height":"813"
},
{
"id":12,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_y",
"ctw":"_0-70",
"width":"813",
"height":"813"
},
{
"id":13,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_0-70",
"width":"813",
"height":"813"
},
{
"id":14,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_1-0",
"width":"813",
"height":"813"
},
{
"id":15,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_1-0",
"width":"813",
"height":"813"
},
{
"id":16,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_y",
"ctw":"_1-0",
"width":"813",
"height":"813"
},
{
"id":17,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":true,
"metal":"_wgp",
"ctw":"_2-0",
"width":"813",
"height":"813"
},
{
"id":18,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_y",
"ctw":"_2-0",
"width":"813",
"height":"813"
},
{
"id":19,
"alt":"image-alt",
"src":"foobar.jpg",
"isVideo":false,
"isDefault":false,
"metal":"_r",
"ctw":"_2-0",
"width":"813",
"height":"813"
},
{
"id":20,
"alt":"image-alt",
"src":"foobar.jpg",
"ytID":"RLBY06fVA2U",
"isVideo":true,
"isDefault":true,
"metal":"_wgp",
"ctw":"_0-70",
"width":"804",
"height":"804"
}
]
}
]
}
</script>
</amp-state>