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