amp-bind

Description

Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.

Required Scripts

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

Menambahkan interaktivitas kustom dengan data binding dan ekspresi.

Skrip yang Diperlukan	`<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>`
Contoh	Contoh kode pengantar dengan anotasi Contoh carousel gambar tertaut dengan anotasi Contoh halaman produk e-commerce dengan anotasi
Tutorial	Membuat halaman AMP yang interaktif

Ringkasan

Komponen amp-bind memungkinkan Anda untuk menambahkan interaktivitas stateful kustom ke halaman AMP melalui data binding dan ekspresi yang mirip JS.

Tonton video ini untuk mengenal amp-bind.

Contoh sederhana

Pada contoh berikut, menge-tap tombol akan mengubah teks elemen <p> dari "Hello World" menjadi "Hello amp-bind".

<p [text]="'Hello ' + foo">Hello World</p>

<button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp-bind"</button>

Untuk menjaga performa dan menghindari risiko loncatan konten, amp-bind tidak mengevaluasi ekspresi saat halaman dimuat. Ini berarti elemen visual harus diberi status default dan tidak mengandalkan amp-bind untuk render awal.

Bagaimana cara kerjanya?

amp-bind memiliki tiga komponen utama:

Status: Status JSON lingkup dokumen yang dapat berubah. Pada contoh di atas, status masih kosong sebelum tombol di-tap. Setelah tombol di-tap, statusnya menjadi {foo: 'amp-bind'}.
Ekspresi: Merupakan ekspresi mirip JavaScript yang dapat merujuk ke state. Contoh di atas memiliki ekspresi tunggal, 'Hello ' + foo, yang menggabungkan literal string 'Hello 'dan variabel status foo. Ada batas 100 operand yang dapat digunakan dalam sebuah ekspresi.
Binding: Merupakan atribut khusus dari bentuk [properti] yang menautkan properti elemen ke sebuah expression. Contoh di atas memiliki binding tunggal, [text], yang akan mengubah <p> teks elemen setiap kali nilai ekspresi berubah.

amp-bind memerlukan penanganan khusus untuk memastikan kecepatan, keamanan, dan performa di halaman AMP.

Contoh yang sedikit lebih rumit

<!-- Store complex nested JSON data in <amp-state> elements. -->
<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      },
      "cat": {
        "imageUrl":