使用amp-bind和amp-mustache迭代amp状态

Question

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

我想到了做这样的事情，但是我找不到一种方法来使amp胡子知道并迭代颜色[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>