amp-html - 使用 amp-bind 和 amp-mustache 迭代 amp-state

Question

我正在尝试为电子商务网站制作产品页面，问题是我不知道如何根据用户选择的颜色动态更改产品的可用尺寸。

我突然想到要做这样的事情，但我找不到让 amp-mustache 知道并遍历颜色 [selectedColor].sizes 以显示该颜色可用的尺寸的方法，有什么想法吗？

谢谢！

<amp-list src=".../amp/{{ productId }}" items="." single-item=".">
    <template type="amp-mustache">
       <select name="color" on="change:AMP.setState({ selectedColor: event.value })">
            {{#colors}}
                <option value="{{color}}">{{color}}</option>
            {{/colors}}
        </select>
        <select name="size" class="input">
            {{#colors[selectedColor].sizes}}
                <option value="{{size}}">{{size}}</option>
            {{/colors[selectedColor].sizes}}
        </select>
    </template>
</amp-list>