amp-bind
- 简介设置基本用法绑定文本绑定 CSS 类绑定宽度和高度隐藏和显示初始化状态远程状态刷新状态推送状态防抖输入事件 amp-bind-macro

网站

amp-bind

简介

amp-bind 允许您在 AMP 的预构建组件之外，向您的页面添加自定义交互性。

设置

在头部导入 amp-bind 组件。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

基本用法

使用 amp-bind，您可以通过绑定更新元素属性和值。在这里，我们根据名为 hideGreeting 的状态变量更新 hidden 属性。在按钮按下时，我们使用 AMP.setState() 操作更新状态。

<div hidden [hidden]="hideGreeting">Hello World</div>
<button on="tap:AMP.setState({ hideGreeting: false })">Show greeting</button>

绑定文本

您可以通过声明对 [text] 属性的绑定来动态更改元素的文本值。

你好世界

<div>Hello <span [text]="myText">World</span></div>
<button on="tap:AMP.setState({ myText: 'AMP' })">Change text</button>

绑定 CSS 类

您可以通过向 [class] 属性添加绑定来动态更改元素的 CSS 类。

Hello World

<div class="background-red" [class]="myClass">Hello World</div>
<button on="tap:AMP.setState({ myClass: 'background-green' })">Change class</button>

绑定宽度和高度

诸如 width 和 height 之类的基本元素属性也可以更新。

<amp-img src="https://unsplash.it/400/200" width="200" [width]="myImageDimension.width" height="100" [height]="myImageDimension.height">
</amp-img>
<button on="tap:AMP.setState({
                  myImageDimension: {
                    width: 400,
                    height: 200
                  }
                })">
  Change size
</button>

隐藏和显示

此示例根据输入选择切换两个 div 的可见性。AMP 提供了 hidden 属性，我们用它来隐藏和显示两个 div。某些元素（例如 select 元素）会触发事件，我们可以使用这些事件来更新状态。

<select on="change:AMP.setState({ option: event.value })">
  <option value="0">No selection</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
<div hidden [hidden]="option != 1">
  Option 1
</div>
<div hidden [hidden]="option != 2">
  Option 2
</div>

初始化状态

amp-state 变量的初始值为 null。但是，绑定不是在页面加载时评估的，而是在后续的用户操作时评估的。如果 amp-state 变量未正确初始化，这可能会导致不必要的副作用。

在此示例中，两个问候都绑定到不同的 amp-state 变量。一个通过 amp-state 元素内的 JSON 字符串初始化，另一个则没有。当用户触发 AMP.setState(...) 操作时，将评估这两个绑定，从而导致第一个绑定显示 null 值。

1. 你好世界

2. 你好世界

<amp-state id="myInitText"><script type="application/json"> "World" </script></amp-state>
  <div>1. Hello <span [text]="undefinedText">World</span></div>
  <div>2. Hello <span [text]="myInitText">World</span></div>
  <button on="tap:AMP.setState({ myInitText: 'AMP' })">Change state</button>

远程状态

amp-state 元素可以使用 src 属性从远程 JSON 端点拉取状态。在这里，我们将 amp-list 的 [src] 属性绑定到 JSON 端点返回的 amp-state 数据。另请注意，我们如何根据元素的数量计算 amp-list 的 [height]。该按钮触发一个空的 AMP.setState() 操作以触发 amp-bind 表达式进行评估。如果您没有在示例中看到占位符项，则 amp-state 已经评估完毕。请刷新页面以查看示例的实际效果。

<amp-state id="placeholderState">
  <script type="application/json">
    {"items": [{"url": "#", "title": "Placeholder1"},{"url": "#", "title": "Placeholder2"}]}
  </script>
</amp-state>
<amp-state id="myRemoteState" src="/static/samples/json/websites.json"></amp-state>
<amp-list layout="fixed-height" height="44" [height]="22 * myRemoteState.items.length" src="amp-state:placeholderState" [src]="myRemoteState.items" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>
<button on="tap:AMP.setState({})">Show websites</button>

刷新状态

amp-state 支持 refresh 操作。这在许多情况下都很有用，例如，初始 URL 加载失败，并且您希望用户再次加载状态。另一个常见的情况是需要更新的实时内容，例如体育直播比分。有关操作的完整列表，请参见此处。单击下面的按钮将刷新并重新获取 amp-state 中的 json，从而显示更新后的时间。

00:00:00

<amp-state id="currentTime" src="/documentation/examples/api/time"></amp-state>
<button on="tap:currentTime.refresh">
  Refresh
</button>
<div [text]="currentTime.time">00:00:00</div>

推送状态

AMP.pushState() 将状态更改写入历史记录。导航返回将恢复以前的状态。要测试这一点，请增加计数并使用浏览器的后退按钮来减少计数。

项目 1

<amp-state id="count"><script type="application/json">1</script></amp-state>
  <div>Item <span [text]="count">1</span></div>
  <button on="tap:AMP.pushState({ count: count + 1 })">Increase count</button>

防抖输入事件

对于文本输入，最好使用 input-throttled 事件来防抖输入。有关更深入的示例，请参见自动建议。

你好？

<amp-state id="name"><script type="application/json"> "?" </script></amp-state>
  <input id="name-input" placeholder="Enter a name" on="input-throttled:AMP.setState({ name: event.value })">
  <div>Hello <span [text]="name">?</span></div>

amp-bind-macro

amp-bind-macro 使在不同操作中重用表达式成为可能。

圆的面积为 0。

<amp-bind-macro id="circleArea" arguments="radius" expression="3.14 * radius * radius">
  <input type="number" min="0" max="100" value="0" on="input-throttled:AMP.setState({ radius: event.value })">
  <div>
    The circle has an area of <span [text]="circleArea(radius)">0</span>.
  </div>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，以讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性的贡献。

在 GitHub 上编辑示例

由 @choumx 撰写