使用AMP.setState点击按钮时双属性变更的AMP-BIND技术咨询

从你给出的代码片段来看，你应该是在尝试用amp-bind的AMP.setState同时更新两个状态属性，但遇到了异常？我先基于常见的场景给你梳理正确的实现方式，再排查可能的问题：

1. 正确的多属性更新示例 #

我先补全你的代码，以一个同时更新计数和元素显示状态的场景为例，这应该符合你用到plus/mius按钮、visible/no-visible类的需求：

<style amp-custom>
  .plus, .mius { width: 50px; height: 50px; }
  .plus {background-color: blue;}
  .mius {background-color: green;}
  .visible { width: 50px; height: 50px; background-color: blue; display:block; }
  .no-visible { display: none; }
</style>
<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>
<body>
  <amp-state id="counterState">
    <script type="application/json">
      {
        "count": 0,
        "showIndicator": false
      }
    </script>
  </amp-state>

  <!-- 绑定显示计数 -->
  <p>当前计数：[counterState.count]</p>

  <!-- 绑定元素显示状态 -->
  <div [class]="counterState.showIndicator ? 'visible' : 'no-visible'"></div>

  <!-- 点击按钮同时更新两个属性 -->
  <button class="plus" on="tap:AMP.setState({
    counterState: {
      count: counterState.count + 1,
      showIndicator: !counterState.showIndicator
    }
  })">+</button>
  
  <button class="mius" on="tap:AMP.setState({
    counterState: {
      count: counterState.count - 1,
      showIndicator: !counterState.showIndicator
    }
  })">-</button>
</body>

2. 常见问题排查 #

如果你点击按钮时两个属性没正常更新，大概率是这些原因：

• 状态对象覆盖问题：如果你的AMP.setState写法是直接平级写{count: ..., showIndicator: ...}，而不是嵌套在counterState对象里，会导致原amp-state中的其他属性被覆盖，一定要确保更新的是状态对象的子属性。
• 初始状态未定义：检查你的amp-state里是否正确定义了这两个属性的初始值，缺失初始值会导致AMP-bind无法正确追踪状态变更。
• 语法错误：仔细检查AMP.setState里的JSON语法，比如逗号是否遗漏、括号是否匹配，哪怕一个小错误都会导致整个更新失效。
• 绑定表达式错误：确认UI元素上的[class]或其他绑定属性的表达式是否正确，比如有没有写错状态变量名（比如把counterState.showIndicator写成showIndicator）。

3. 调试小技巧 #

可以用Chrome的AMP开发者工具快速定位问题：

• 右键页面选择「检查」，切换到「AMP」标签页，查看状态变更的实时日志。
• 点击按钮后，查看amp-state的实时值，确认两个属性是否真的被更新了。

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