amp-bind
Komponen Amp-bind memungkinkan Anda untuk menambahkan interaktivitas khusus ke halaman Anda di luar komponen AMP.
Ia bekerja dengan memutasikan elemen sebagai respons terhadap tindakan pengguna melalui tautan data dan ekspresi seperti JS.
Sebagai contoh, amp-bind dapat digunakan untuk itu:
- Tautkan dua komponen amp-carousel dalam galeri gambar dengan daftar thumbnail bergerak.
- Buat halaman produk e-commerce di mana antarmuka pengguna berubah jika item pengguna yang dipilih saat ini tidak tersedia.
Cara Penambahannya
Masukan komponen amp-bind tepat di bawah <head>
Konfigurasi kondisi awal
Komponen amp-bind bekerja dengan menghubungkan elemen-elemen ke "keadaan" JSON implisit. Keadaan ini dapat diinisialisasi dengan satu atau lebih komponen <amp-state>.
Referensi keadaan tersirat dalam ekspresi tautan dilakukan dengan sintaksis titik atauallAnimals.dog.imageUrl, allAnimals.dog.imageUrl oleh id elemen <amp-state>, misalnya, allAnimals.dog.imageUrl o allAnimals['cat']['imageUrl'] .
- Isi dari <amp-state> itu harus tunggal script JSON.
- Mirip dengan konfigurasi <amp-analytics>, Menempatkan metadata di akhir dokumen membantu halaman menampilkan lebih cepat.
Buat tautan data
Tautan data adalah tautan antara elemen HTML dan ekspresi. Ketika nilai ekspresi berubah, elemen diperbarui dengan nilai itu.
Anda dapat menautkan tiga jenis status elemen:
- text para textContent
- class para clases CSS
- Atribut khusus elemen, misalnya, atribut src untuk amp-img atau amp-video.
Untuk membuat tautan, buat atribut baru di elemen dengan sintaks:
[attribute]="expression"
Teks mengikat
Teks ini <p> itu akan berubah ketika variable currentAnimal. Kodenya currentAnimal adalah variabel status tidak diinisialisasi, yang akan ditetapkan ketika perubahan status diaktifkan (lihat di bawah).
Binding Styles
Style dapat diubah melalui penerapan kelas CSS, yang akan menggantikan semua kelas gaya elemen. allAnimals, adalah id dari komponen amp-state sebelumnya dan kami menggunakan notasi braket karena currentAnimal Itu adalah variable.
Mengikat nilai atribut
Beberapa komponen AMP mendukung nilai atribut tautan dengan amp-bind. Dengan Contohnya, Anda dapat mengubah URL dari amp-img.
Anda juga dapat mengubah URL src untuk video yang disematkan amp-video. Saat ini, hanya di antara semua komponen video AMP,amp-video mengakui amp-bind
Pembaruan aktivasi
Tautan data dievaluasi ketika perubahan status tersirat. Negara AMP.setState Itu bisa dilakukan melalui action.
- AMP.setState bergabung di negara baru dengan negara bagian AMP.setState
- Status yang ada dapat ditimpa, termasuk status yang diinisialisasi oleh komponen amp-state.
Ia bekerja dengan memutasikan elemen sebagai respons terhadap tindakan pengguna melalui tautan data dan ekspresi seperti JS.
Sebagai contoh, amp-bind dapat digunakan untuk itu:
- Tautkan dua komponen amp-carousel dalam galeri gambar dengan daftar thumbnail bergerak.
- Buat halaman produk e-commerce di mana antarmuka pengguna berubah jika item pengguna yang dipilih saat ini tidak tersedia.
Cara Penambahannya
Masukan komponen amp-bind tepat di bawah <head>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Konfigurasi kondisi awal
Komponen amp-bind bekerja dengan menghubungkan elemen-elemen ke "keadaan" JSON implisit. Keadaan ini dapat diinisialisasi dengan satu atau lebih komponen <amp-state>.
Contohnya<amp-state id="allAnimals"> <script type="application/json"> { "dog": { "imageUrl": "/img/Border_Collie.jpg", "videoUrl": "/video/dog-video.mp4", "style": "greenBackground" }, "cat": { "imageUrl": "/img/cat-looking-up-300x200.jpg", "videoUrl": "/video/cat-video.mp4", "style": "redBackground" } } </script> </amp-state>
Referensi keadaan tersirat dalam ekspresi tautan dilakukan dengan sintaksis titik atauallAnimals.dog.imageUrl, allAnimals.dog.imageUrl oleh id elemen <amp-state>, misalnya, allAnimals.dog.imageUrl o allAnimals['cat']['imageUrl'] .
- Isi dari <amp-state> itu harus tunggal script JSON.
- Mirip dengan konfigurasi <amp-analytics>, Menempatkan metadata di akhir dokumen membantu halaman menampilkan lebih cepat.
Buat tautan data
Tautan data adalah tautan antara elemen HTML dan ekspresi. Ketika nilai ekspresi berubah, elemen diperbarui dengan nilai itu.
Anda dapat menautkan tiga jenis status elemen:
- text para textContent
- class para clases CSS
- Atribut khusus elemen, misalnya, atribut src untuk amp-img atau amp-video.
Untuk membuat tautan, buat atribut baru di elemen dengan sintaks:
[attribute]="expression"
Teks mengikat
Teks ini <p> itu akan berubah ketika variable currentAnimal. Kodenya currentAnimal adalah variabel status tidak diinisialisasi, yang akan ditetapkan ketika perubahan status diaktifkan (lihat di bawah).
Contohnya<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>This is a dog.
Binding Styles
Style dapat diubah melalui penerapan kelas CSS, yang akan menggantikan semua kelas gaya elemen. allAnimals, adalah id dari komponen amp-state sebelumnya dan kami menggunakan notasi braket karena currentAnimal Itu adalah variable.
Contohnya<p [class]="allAnimals[currentAnimal].style" class="greenBackground">Each animal has a different background color.</p>Each animal has a different background color.
Mengikat nilai atribut
Beberapa komponen AMP mendukung nilai atribut tautan dengan amp-bind. Dengan Contohnya, Anda dapat mengubah URL dari amp-img.
Contohnya<amp-img src="/img/Border_Collie.jpg" layout="responsive" width="300" height="200" [src]="allAnimals[currentAnimal].imageUrl"> </amp-img>
Anda juga dapat mengubah URL src untuk video yang disematkan amp-video. Saat ini, hanya di antara semua komponen video AMP,amp-video mengakui amp-bind
Contohnya<amp-video src="/video/dog-video.mp4" layout="responsive" [src]="allAnimals[currentAnimal].videoUrl" width="300" height="170" autoplay controls="true"></amp-video>
Pembaruan aktivasi
Tautan data dievaluasi ketika perubahan status tersirat. Negara AMP.setState Itu bisa dilakukan melalui action.
- AMP.setState bergabung di negara baru dengan negara bagian AMP.setState
- Status yang ada dapat ditimpa, termasuk status yang diinisialisasi oleh komponen amp-state.
Contohnya<button class="ampstart-btn caps m1" on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>