【问题标题】:Bind an amp-state's initial value绑定 amp-state 的初始值
【发布时间】:2017-09-27 13:53:16
【问题描述】:

我想按如下方式初始化 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>

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

Codepen:https://codepen.io/powlo/pen/VMpVRm/?editors=1000

【问题讨论】:

  • 我知道它不会在页面加载时进行评估,但您找到解决问题的方法了吗?你能分享一下你是怎么做的代码吗?我正在努力解决同样的问题。
  • 查看我对已接受答案的评论,您已经提供了初始 vanilla html 属性或内容。所以

    初始内容

    。类似的东西(未验证)。

  • 确实是powlo,想想..如果你的初始值是“最新的”,为什么不做&lt;p [text]="tabs.selected"&gt;latest&lt;p&gt;?整个绑定点是为了以后的交互,所以不会阻碍页面的初始加载。

标签: amp-html


【解决方案1】:

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

【讨论】:

  • 基本上,您应该始终提供有意义的属性以及绑定属性。例如 text="1" [text]="somestate.somevar"
猜你喜欢
  • 1970-01-01
  • 2014-08-27
  • 2012-05-04
  • 2017-04-22
  • 2012-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-30
相关资源
最近更新 更多