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 类。

你好，世界

<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 撰写