KnockoutJS - Pengikatan Deklaratif
Pengikatan deklaratif di KnockoutJS menyediakan cara yang ampuh untuk menghubungkan data ke UI.
Penting untuk memahami hubungan antara binding dan Observable. Secara teknis, keduanya berbeda. Anda dapat menggunakan objek JavaScript normal karena ViewModel dan KnockoutJS dapat memproses pengikatan View dengan benar.
Tanpa Observable, properti dari UI hanya akan diproses untuk pertama kalinya. Dalam kasus ini, tidak dapat diperbarui secara otomatis berdasarkan pembaruan data yang mendasarinya. Untuk mencapai ini, binding harus mengacu pada properti yang Dapat diamati.
Binding Syntax
Penjilidan terdiri dari 2 item, yaitu penjilidan name dan value. Berikut adalah contoh sederhana -
Today is : <span data-bind = "text: whatDay"></span>Di sini, teks adalah nama pengikat dan whatDay adalah nilai pengikatan. Anda dapat memiliki beberapa binding yang dipisahkan dengan koma, seperti yang ditunjukkan dalam sintaks berikut.
Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />Di sini, nilai diperbarui setelah setiap tombol ditekan.
Nilai-Nilai yang Mengikat
Nilai pengikatan dapat berupa a single value, literal, Sebuah variable atau bisa menjadi JavaScriptekspresi. Jika pengikatan mengacu pada ekspresi atau referensi yang tidak valid, maka KO akan menghasilkan kesalahan dan menghentikan pemrosesan pengikatan.
Berikut adalah beberapa contoh binding.
<!-- simple text binding -->
<p>Enter employee name: <input -bind = 'value: empName' /></p>
<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>
<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray ,
selectedOptions: chosenItem"> </select>Perhatikan poin-poin berikut -
Spasi putih tidak membuat perbedaan apa pun.
Mulai dari KO 3.0, Anda dapat melewati nilai penjilidan yang akan memberikan nilai penjilidan yang tidak ditentukan.
Konteks yang Mengikat
Data yang digunakan dalam binding saat ini dapat direferensikan oleh sebuah objek. Objek ini disebutbinding context.
Hierarki konteks dibuat dan dikelola oleh KnockoutJS secara otomatis. Tabel berikut mencantumkan berbagai jenis konteks pengikatan yang disediakan oleh KO.
| Sr.No. | Jenis & Deskripsi Konteks yang Mengikat |
|---|---|
| 1 | $root Ini selalu mengacu pada ViewModel tingkat atas. Ini memungkinkan untuk mengakses metode tingkat atas untuk memanipulasi ViewModel. Biasanya ini adalah objek yang diteruskan ke ko.applyBindings. |
| 2 | $data Properti ini sangat mirip thiskata kunci dalam objek Javascript. Properti $ data dalam konteks yang mengikat merujuk ke objek ViewModel untuk konteks saat ini. |
| 3 | $index Properti ini berisi indeks item saat ini dari array di dalam loop foreach. Nilai $ index akan berubah secara otomatis saat dan ketika array Observable yang mendasari diperbarui. Jelas, konteks ini hanya tersedia untukforeach binding. |
| 4 | $parent Properti ini merujuk ke objek ViewModel induk. Ini berguna saat Anda ingin mengakses properti ViewModel luar dari dalam loop bersarang. |
| 5 | $parentContext Objek konteks yang terikat pada tingkat induk disebut $parentContext. Ini berbeda dengan$parent. $ parent mengacu pada data. Sedangkan, $ parentContext mengacu pada konteks pengikatan. Misalnya, Anda mungkin perlu mengakses indeks item luar foreach dari konteks dalam. |
| 6 | $rawdata Konteks ini menyimpan nilai ViewModel mentah dalam situasi saat ini. Ini menyerupai $ data tetapi perbedaannya adalah, jika ViewModel dibungkus dalam Observable, maka $ data menjadi tidak terbungkus. ViewModel dan $ rawdata menjadi data Observable aktual. |
| 7 | $component Konteks ini digunakan untuk merujuk ke ViewModel dari komponen tersebut, ketika Anda berada di dalam komponen tertentu. Misalnya, Anda mungkin ingin mengakses beberapa properti dari ViewModel daripada data saat ini di bagian template komponen. |
| 8 | $componentTemplateNodes Ini mewakili larik simpul DOM yang diteruskan ke komponen tertentu itu ketika Anda berada di dalam templat komponen tertentu. |
Istilah berikut juga tersedia dalam konteks yang mengikat tetapi sebenarnya bukan konteks yang mengikat.
$context - Ini tidak lain adalah objek konteks yang mengikat.
$element - Objek ini merujuk ke elemen di DOM dalam pengikatan saat ini.
Bekerja dengan Teks dan Penampilan
Berikut adalah daftar jenis penjilidan yang disediakan oleh KO untuk menangani teks dan tampilan visual.
| Sr.No. | Jenis & Penggunaan Jilid |
|---|---|
| 1 | terlihat: Untuk menampilkan atau menyembunyikan elemen DOM HTML tergantung pada kondisi tertentu. |
| 2 | teks: Untuk mengatur konten elemen HTML DOM. |
| 3 | html: Untuk menyetel konten markup HTML dari elemen DOM. |
| 4 | css: Untuk menerapkan kelas CSS ke sebuah elemen. |
| 5 | gaya: Untuk menentukan atribut gaya sebaris sebuah elemen. |
| 6 | attr: Untuk menambahkan atribut ke elemen secara dinamis. |
Bekerja dengan Control Flow Bindings
Berikut adalah daftar tipe Control Flow Binding yang disediakan oleh KO.
| Sr.No. | Jenis & Penggunaan Jilid |
|---|---|
| 1 | foreach: Dalam pengikatan ini, setiap item array direferensikan dalam markup HTML dalam satu putaran. |
| 2 | jika: Jika kondisinya benar, maka markup HTML yang diberikan akan diproses. Jika tidak, ini akan dihapus dari DOM. |
| 3 | ifnot: Negasi dari If. Jika kondisinya benar, maka markup HTML yang diberikan akan diproses. Jika tidak, ini akan dihapus dari DOM. |
| 4 | dengan: Pengikatan ini digunakan untuk mengikat elemen anak suatu objek dalam konteks objek yang ditentukan. |
| 5 | komponen: Pengikatan ini digunakan untuk memasukkan komponen ke dalam elemen DOM dan meneruskan parameter secara opsional. |
Bekerja dengan Binding Bidang Formulir
Berikut adalah daftar jenis-jenis Penjilidan Bidang Formulir yang disediakan oleh KO.
| Sr.No. | Jenis & Penggunaan Jilid |
|---|---|
| 1 | klik: Pengikatan ini digunakan untuk menjalankan fungsi JavaScript yang terkait dengan elemen DOM berdasarkan satu klik. |
| 2 | acara: Pengikatan ini digunakan untuk mendengarkan kejadian DOM yang ditentukan dan memanggil fungsi penangan terkait berdasarkan padanya. |
| 3 | kirimkan: Pengikatan ini digunakan untuk menjalankan fungsi JavaScript saat elemen DOM terkait dikirimkan. |
| 4 | aktifkan: Pengikatan ini digunakan untuk mengaktifkan elemen DOM tertentu berdasarkan kondisi yang ditentukan. |
| 5 | nonaktifkan: Pengikatan ini menonaktifkan elemen DOM terkait saat parameter bernilai true. |
| 6 | nilai: Pengikatan ini digunakan untuk menautkan masing-masing nilai elemen DOM ke properti ViewModel. |
| 7 | textInput: Pengikatan ini digunakan untuk membuat pengikatan 2 arah antara kotak teks atau area teks dan properti ViewModel. |
| 8 | hasFocus: Pengikatan ini digunakan untuk menyetel fokus elemen DOM HTML secara manual melalui properti ViewModel. |
| 9 | diperiksa: Pengikatan ini digunakan untuk membuat tautan antara elemen formulir yang dapat diperiksa dan properti ViewModel. |
| 10 | pilihan: Pengikatan ini digunakan untuk menentukan opsi untuk elemen pilih. |
| 11 | selectedOptions: Pengikatan ini digunakan untuk bekerja dengan elemen yang dipilih saat ini dalam kontrol formulir pilih multi daftar. |
| 12 | uniqueName: Pengikatan ini digunakan untuk menghasilkan nama unik untuk elemen DOM. |