如何用amp-bind与amp-mustache实现电商产品颜色联动尺寸切换？

首先得明确你遇到的核心问题：amp-mustache是静态模板渲染工具，它在amp-list加载数据并渲染模板的那一刻就完成了所有解析，而selectedColor是用户交互后通过AMP.setState动态更新的状态，这时候模板已经没法再重新解析colors[selectedColor].sizes这种动态表达式了。下面是具体的解决思路和代码调整方案：

步骤1：把产品数据存入AMP全局状态 #

首先需要将amp-list加载的产品数据（包括所有颜色和对应的尺寸）存入AMP的全局状态，这样后续才能通过amp-bind动态访问。我们可以利用amp-list的load事件来完成这一步：

<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}}" {{#first}}selected{{/first}}>{{color}}</option>
      {{/colors}}
    </select>

    <!-- 尺寸选择器后续用amp-bind处理 -->
    <select name="size" class="input"></select>
  </template>
  <!-- 加载完成后把产品数据存入全局状态 -->
  <div on="load:AMP.setState({ product: event.response })"></div>
</amp-list>

<!-- 初始化AMP状态，设置默认选中的第一个颜色 -->
<amp-state id="productState">
  <script type="application/json">
    {
      "selectedColor": ""
    }
  </script>
</amp-state>

步骤2：用amp-bind动态生成尺寸选项 #

接下来，我们需要用amp-bind的[options]属性，根据当前选中的selectedColor动态生成尺寸选项。这里的关键是通过状态计算出对应颜色的尺寸数组，然后转换成amp-bind要求的{value: '', text: ''}格式：

修改尺寸选择器的代码，替换成下面的内容：

<select 
  name="size" 
  class="input"
  [options]="product.colors.find(c => c.color == selectedColor)?.sizes.map(size => ({value: size, text: size})) || []"
>
  <!-- 初始默认选项（可选） -->
  <option value="">请选择尺寸</option>
</select>

步骤3：处理初始状态的默认值 #

为了确保页面加载完成后默认显示第一个颜色的尺寸，我们需要在amp-list加载完成时，把第一个颜色设置为默认选中的selectedColor。可以调整amp-list的load事件：

<div on="load:AMP.setState({ 
  product: event.response,
  selectedColor: event.response.colors[0].color
})"></div>

完整调整后的代码示例 #

<amp-state id="productState">
  <script type="application/json">
    {
      "selectedColor": "",
      "product": {}
    }
  </script>
</amp-state>

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

    <select 
      name="size" 
      class="input"
      [options]="product.colors.find(c => c.color == selectedColor)?.sizes.map(size => ({value: size, text: size})) || []"
    >
      <option value="">请选择尺寸</option>
    </select>
  </template>
  <div on="load:AMP.setState({ 
    product: event.response,
    selectedColor: event.response.colors[0].color
  })"></div>
</amp-list>

关键原理说明 #

• amp-bind是AMP用于处理动态状态更新的工具，它可以监听状态变化并实时更新DOM属性，正好弥补了amp-mustache静态渲染的局限性。
• 通过find方法从product.colors数组中匹配当前选中的颜色，再通过map把尺寸数组转换成amp-bind[options]需要的格式。
• 加入|| []是为了处理异常情况（比如找不到对应颜色时），避免出现页面错误。

内容的提问来源于stack exchange，提问作者Azucena H