绑定内嵌表单的amp-list首次选数量时选中项丢失问题咨询

这个坑我之前踩过！本质是amp-list重新渲染时，DOM元素被替换导致选中状态没有同步。首次选择数量2触发amp-bind更新数据源后，amp-list会重新生成整个列表的DOM，原来被选中的单选按钮被新元素替换，而此时amp-bind的状态还没来得及绑定到新元素上，就出现了状态丢失的情况；后续操作时状态变量已经存在，重新渲染时能正确匹配，所以状态能保留。

给你两个靠谱的解决方案：

方案一：用amp-bind绑定单选按钮的checked状态 #

核心思路是把选中的数量存在一个全局状态变量里，让每个单选按钮的选中状态直接和这个变量绑定，这样不管amp-list怎么重新渲染，新生成的按钮都会根据变量值自动选中对应选项。

具体步骤： #

1. 初始化一个状态变量，比如selectedQty，可以在页面的根元素（比如<body>）上设置默认值：

<body data-amp-bind-selectedQty="1">

2. 修改单选按钮的代码，绑定checked属性并更新状态：

<!-- 以数量2的单选按钮为例 -->
<input 
  type="radio" 
  name="qty" 
  value="2"
  [checked]="selectedQty == 2"
  on="change:AMP.setState({
    selectedQty: event.value,
    // 这里放你原来触发amp-list更新的状态变量，比如商品列表的数据源
    productList: /* 更新后的数据源 */
  })"
>

这样每次点击单选按钮时，先更新selectedQty状态，再更新列表数据源。当amp-list重新渲染时，新的单选按钮会根据selectedQty的值自动选中对应的选项，再也不会丢失状态了。

方案二：优化amp-list的渲染策略（可选） #

如果你的列表数据变化不大，可以尝试给amp-list添加items属性的绑定，或者使用amp-state来局部更新数据，减少完全重新渲染的概率，但这个方法不如方案一直接可靠，推荐优先用方案一。

内容的提问来源于stack exchange，提问作者Anthony 'Ants' Nguyen