amp-bind

Introduction

amp-bind allows you to add custom interactivity to your pages beyond using AMP's pre-built components.

Setup

Import the amp-bind component in the header.

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

Basic usage

With amp-bind, you can update element attributes and values via bindings. Here we update the hidden attribute based on a state variable called hideGreeting. On button press, we use the AMP.setState() action to update the state.

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

Binding text

You can dynamically change the text value of an element by declaring a binding to the [text] attribute.

Hello World

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

Binding CSS classes

You can dynamically change the CSS classes of an element by adding a binding to the [class] attribute.

Hello World

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

Binding width and height

Basic element properties such as width and height can be updated as well.

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

Hiding & showing

This sample toggles the visibility of two divs based on a input selection. AMP provides the hidden attribute, which we use to hide and show the two divs. Some elements, such as the select element, fire events we can use to update state.

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

Initializing state

The initial value of an amp-state variable is null. However, bindings are not evaluated on page load, but on subsequent user actions. This can lead to unwanted side effects if amp-state variables are not correctly initialized.

In this sample, both greetings bind to different amp-state variables. One is initialized via an JSON string inside an amp-state element, the other is not. When the user triggers an AMP.setState(...) action, both bindings will be evaluated resulting in the first binding displaying a null value.

1. Hello World

2. Hello World

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

Push State

AMP.pushState() writes state changes to the history. Navigating back, will restore the previous state. To test this, increase the count and use your browser's back button to decrease the count.

Item 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>

Debounce input events

For text input, it's a good idea to debounce the input using the input-throttled event. For a more in-depth example, see autosuggest.

Hello ?

<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 makes it possible to reuse expressions across different actions.

The circle has an area of 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>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @choumx