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