Introducing <amp-bind>

We've mentioned amp-bind a few times in the previous chapters; now it's time to see it in action. The amp-bind component makes it possible to program custom interactivity into your pages. You can think of it as a programming layer for your AMP pages, sort of a JavaScript-lite.

You can add amp-bind to your pages with the following script:

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

State, expressions, and data-binding

There are three parts to amp-bind: stateful data, expressions, and data-binding. With amp-bind, element properties can be linked to custom JavaScript-like expressions which can reference custom state variables. This needs some explanation, so let's expand on it now.

Stateful data in <amp-bind> with <amp-state>

The amp-bind component introduces the notion of document state. You can think of this as mutable JSON variable storage.

Initializing state with <amp-state>

By default...