amp-bind
Komponen Amp-bind memungkinkan Anda untuk menambahkan interaktivitas khusus ke halaman Anda di luar komponen AMP yang dibuat sebelumnya.
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-korsel 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
Impor komponen amp-bind tepat di bawah bukaan <head>
Konfigurasi kondisi awal
Komponen amp-bind ini bekerja dengan menghubungkan elemen ke "estado" implícito de JSON. Este estado se puede inicializar con uno o más componentes <amp-state>.
Referensi keadaan tersirat dalam ekspresi tautan dilakukan dengan sintaksis titik atau allAnimals.dog.imageUrl, allAnimals.dog.imageUrl oleh id elemen <amp-state>, oleh Contohnya, 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
- Atributos específicos de elementos, por Contohnya, el atributo src para amp-img o amp-video.
Untuk membuat tautan, buat atribut baru di elemen dengan sintaks:
[attribute]="expression"
Teks mengikat
Teks ini <p> itu akan berubah ketika variabel berubah currentAnimal. Kodenya currentAnimal adalah variabel status tidak diinisialisasi, yang ditetapkan ketika perubahan status diaktifkan (lihat di bawah).
Style Binding
Gaya dapat diubah melalui penerapan kelas CSS, yang akan menggantikan semua kelas gaya elemen. Dalam contohnya allAnimals, adalah id dari komponen amp-state sebelumnya dan kami menggunakan notasi braket karena currentAnimal Itu adalah variabel.
Mengikat nilai atribut
Beberapa komponen AMP mendukung nilai atribut tautan dengan amp-bind. Dengan Contohnya, Anda dapat mengubah URL amp-img.
Anda juga dapat mengubah URL src untuk video yang disematkan amp-video. Saat ini, di antara semua komponen video AMP, hanya amp-video admite amp-bind
Actualizaciones de activación
Tautan data dievaluasi ketika perubahan status tersirat. Negara AMP.setState Itu bisa dilakukan melalui tindakan.
- 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-korsel 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
Impor komponen amp-bind tepat di bawah bukaan <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 ini bekerja dengan menghubungkan elemen ke "estado" implícito de JSON. Este estado se puede inicializar con uno o más componentes <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 atau allAnimals.dog.imageUrl, allAnimals.dog.imageUrl oleh id elemen <amp-state>, oleh Contohnya, 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
- Atributos específicos de elementos, por Contohnya, el atributo src para amp-img o amp-video.
Untuk membuat tautan, buat atribut baru di elemen dengan sintaks:
[attribute]="expression"
Teks mengikat
Teks ini <p> itu akan berubah ketika variabel berubah currentAnimal. Kodenya currentAnimal adalah variabel status tidak diinisialisasi, yang ditetapkan ketika perubahan status diaktifkan (lihat di bawah).
Contohnya<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>This is a dog.
Style Binding
Gaya dapat diubah melalui penerapan kelas CSS, yang akan menggantikan semua kelas gaya elemen. Dalam contohnya allAnimals, adalah id dari komponen amp-state sebelumnya dan kami menggunakan notasi braket karena currentAnimal Itu adalah variabel.
Contohnya<p [class]="allAnimals[currentAnimal].style" class="greenBackground">Setiap hewan memiliki warna latar belakang yang berbeda.</p>Setiap hewan memiliki warna latar belakang yang berbeda.
Mengikat nilai atribut
Beberapa komponen AMP mendukung nilai atribut tautan dengan amp-bind. Dengan Contohnya, Anda dapat mengubah URL 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, di antara semua komponen video AMP, hanya amp-video admite 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>
Actualizaciones de activación
Tautan data dievaluasi ketika perubahan status tersirat. Negara AMP.setState Itu bisa dilakukan melalui tindakan.
- 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>