具有状态设置事件的多个放大器选择器

Question

我在一个页面上有两个 amp-selector 元素：

<amp-selector layout="container" on="select: AMP.setState({
      a1SelectedOption: event.targetOption
    })">
  <div option="a" selected>Option A</div>
  <div option="b">Option B</div>
</amp-selector>
<amp-selector layout="container" on="select: AMP.setState({
      a2SelectedOption: event.targetOption
    })">
  <div option="c" selected>Option C</div>
  <div option="d">Option D</div>
</amp-selector>

然后我有文本占位符：

<h3 id="a1" [text]="a1SelectedOption">a</h3>
<h3 id="a2" [text]="a2SelectedOption">c</h3>

当某人首次与 select 或其他占位符进行交互时，会触发该占位符并将文本更新为 null，例如页面加载后，select 选项 B，占位符 html 变为 <h3 id="a1" [text]="a1SelectedOption">b</h3> <h3 id="a2" [text]="a2SelectedOption">null</h3>.

我怀疑这是因为在每个 select 的 on 语句中都使用 event.targetOption 或者 docs on events 我不清楚如何解决。

设置独立于其他 amp-select 的变量值的适当方法是什么？

Answer 1

AMP 事件模型似乎会触发所有状态值进行评估，因此它会将另一个变量闪现为具有空值的创建。

为防止此变量必须使用默认值进行初始化，即

<amp-state id="a1SelectedOption"><script type="application/json"> "a" </script></amp-state>
<amp-state id="a2SelectedOption"><script type="application/json"> "c" </script></amp-state>

具有状态设置事件的多个放大器选择器

Multiple amp-selectors with state setting events

amp-html

amp-selector