amp-html - 绑定(bind) amp-state 的初始值

Question

我想按如下方式初始化 amp-state:

<amp-state id="tabs">
  <script type="application/json">
  {
    "selected": "latest"
  }
  </script>
</amp-state>

然后在第一页请求上显示这个初始化值:

<p [text]="tabs.selected"><p>

这行不通。 p 标签的内容只有在状态发生变化时才会更新。例如从一个按钮:

<button on="tap:AMP.setState({tabs: {selected: 'top'}})">Press me</button>

我希望页面上的元素在进一步的用户交互之前反射(reflect)初始化状态。

密码笔: https://codepen.io/powlo/pen/VMpVRm/?editors=1000

Answer 1

amp-bind 表达式不会在页面加载时进行评估。这是为了避免页面加载时布局跳转。如果要在页面加载时动态初始化元素，则需要使用 amp-list 扩展(即使它只是单个元素)。