将多个AMP状态输入加入到用于动态AMP轮播的过滤器中？

Question

我正在将珠宝电子商务产品页面手动移植到AMP。我需要组合多个独立的AMP状态（宝石形状，克拉重量，贵金属），然后将结果用作array.filter（）的输入，以为动态AMP-旋转木马过滤JSON。

所需的用户体验：如果用户单击“金黄色”按钮，然后单击“ 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扩展为两个离散目标？

1. 根据用户选择的选项生成更新的'myFilter']
2. 将'filteredProducts'设置为values.filter（a => myFilter）

这是我的AMP轮播，以及我的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>

我正在将珠宝电子商务产品页面手动移植到AMP。我需要组合多个独立的AMP状态（宝石形状，克拉重量，贵重金属），然后将结果用作...

Answer 1