AMP邮件：如何在amp-list加载后设状态或用其数据设默认选中项

问题背景 #

使用amp-list从后端加载选项列表，需要将选中项绑定到<input>的状态变量，希望默认选中第一个选项（也支持按钮手动触发），但尝试以下方法均无效：

• 按钮点击时判断selected为空，尝试设置为列表第一项，但无法获取列表数据
• 尝试通过src初始化AMP State，在邮件环境中不可用
• 寻找amp-list加载完成回调触发setState，但该组件无此回调

可行解决方案：结合amp-list的initial-data与amp-bind初始状态 #

AMP邮件的沙箱机制限制了直接操作DOM或访问动态加载的列表数据，因此我们可以通过预定义初始状态和同步列表数据结构的方式实现需求：

1. 预定义初始状态与列表模板数据
   添加amp-state组件，提前设置默认选中的选项值，同时定义与后端接口返回结构一致的初始列表数据，确保动态加载前后列表第一项内容匹配。

2. 绑定状态与手动触发逻辑
   将<input>的动态值绑定到amp-state中的selected变量，同时给按钮添加触发事件，直接从预定义的初始列表数据中获取第一项的值来更新状态。

修改后的完整代码：

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
  <script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  <!-- 定义应用状态：默认选中第一个选项，同时预存列表初始数据 -->
  <amp-state id="appState">
    <script type="application/json">
      {
        "selected": "AMP YouTube Channel",
        "defaultList": {
          "items": [
            {"title": "AMP YouTube Channel", "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4UQw"},
            {"title": "AMP.dev", "url": "https://amp.dev"},
            {"title": "AMP Blog", "url": "https://amp.dev/blog/"}
          ]
        }
      }
    </script>
  </amp-state>

  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://amp.dev/static/inline-examples/data/amp-list-urls.json"
    initial-data="[[appState.defaultList]]"
  >
    <template type="amp-mustache">
      <div class="url-entry">
        <button on="tap:AMP.setState({ appState: { selected: '{{title}}' } })">{{title}}</button>
      </div>
    </template>
  </amp-list>

  <!-- 输入框默认值与初始状态同步，动态值绑定到状态变量 -->
  <input type="text" value="AMP YouTube Channel" [value]="appState.selected" />
  <!-- 手动触发选中第一个选项的按钮 -->
  <button on="tap:AMP.setState({ appState: { selected: appState.defaultList.items[0].title } })">选中第一个选项</button>
  <button>Submit</button>
</body>
</html>

方案细节说明 #

• 初始状态兜底：页面加载时<input>的value直接设为默认选中值，同时通过amp-bind的[value]绑定状态变量，确保状态更新后输入框内容同步。
• initial-data匹配：amp-list的initial-data与后端返回的列表结构完全一致，保证动态加载完成后，列表第一项与预定义的默认选中值完全匹配，不会出现显示不一致的情况。
• 手动触发逻辑：按钮点击时直接从amp-state的预存列表数据中取第一项的title，无需依赖amp-list动态加载的内容，避开了沙箱限制。

特殊场景处理 #

如果后端返回的列表顺序不固定，需要后端接口额外返回默认选中的选项值，将该值填入amp-state的selected初始值即可，无需修改前端逻辑。

内容的提问来源于stack exchange，提问作者Mark Bao