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.
<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.
<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.
<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>
Remote state
The amp-state element can pull in state from a remote JSON endpoint using the src attribute. Here we bind an amp-list's [src] attribute to amp-state data returned by an JSON endpoint. Also note how we calculate the amp-list's [height] based on the number of elements. The button triggers an empty AMP.setState() action to trigger amp-bind expressions to evaluate. If you don't see the placeholder items in the example, the amp-state has already been evaluated. Please refresh the page to see the example in action.
<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>
Refresh state
amp-state supports the refresh action. This can be useful in many cases, for example the initial URL loading fails and you want the user to load the state again. Another common scenario is live content that needs to be updated, e.g. a sports live score. For a complete list of actions, see here. Clicking the button below will refresh and refetch the json in amp-state showing an updated time.
<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>
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.
<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.
<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.
<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-