Memahami Kalah Mati dan cara menggunakan Kalah Mati untuk mengikat kemahiran context_javascript

Pengenalan Kalah Mati

Kalah mati, dirujuk sebagai ko, ialah perpustakaan kelas javascript ringan yang menggunakan corak reka bentuk MVVM (iaitu Model, view, viewModel) untuk melaksanakan kemas kini pengikatan dua hala dan masa nyata secara ringkas dan elegan, membantu anda menggunakan kemas kini yang bersih model data untuk Mencipta antara muka pengguna yang kaya dan responsif.

Kalah mati mempunyai tiga ciri teras:

1. Penjejakan kebergantungan yang elegan: Pada bila-bila masa model data berubah, bahagian UI yang sepadan akan dikemas kini secara automatik

2. Pengikatan perisytiharan: Hanya kaitkan UI dengan model data anda dan anda boleh mencipta UI dinamik yang kompleks;

3. Boleh diperluaskan secara remeh: Ia hanya memerlukan beberapa baris kod untuk melaksanakan gelagat tersuai sebagai pengikatan deklaratif;

Kelebihan lain:
1. Kod javascript tulen;

2. Boleh ditambah ke aplikasi web sedia ada anda pada bila-bila masa;

3. Ringan, hanya 13K selepas GZIP;

4. Boleh berfungsi dalam hampir semua penyemak imbas arus perdana ((IE 6, Firefox 2, Chrome, Safari, Edge, lain-lain);

ko menggunakan corak reka bentuk MVVM, iaitu model view viewModel.

Contoh mudah

Semudah itu, anda tidak perlu menulis kod untuk mengemas kini kandungan teks, ia akan dikemas kini secara automatik apabila panjang tatasusunan berubah Begitu juga, jika kita ingin menggunakan panjang tatasusunan untuk mengawal ketersediaan butang, kita hanya perlukan:

There are <span data-bind="text: myItems().length"></span> items 

Berikut akan memperkenalkan cara menggunakan Kalah Mati untuk mengikat konteks

<button data-bind="enable: myItems().length < 5">Add</button>

Konteks mengikat

Konteks pengikatan ialah objek yang menyimpan data yang boleh anda rujuk dalam pengikatan anda. Kalah mati secara automatik mencipta dan mengurus perhubungan warisan untuk konteks mengikat apabila menggunakan pengikatan. Punca hierarki ini merujuk kepada parameter viewModel yang anda tentukan (ko.applyBindings(viewModel)).
Kemudian gunakan aliran kawalan seperti dengan atau foreach untuk mencipta konteks mengikat nod anak setiap kali untuk merujuk data viewModel bersarang.

$ibu bapa

$ibu bapa

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

Ini ialah tatasusunan yang mewakili semua model paparan nod induk
$parent[0]: mewakili nod induk;

$parent[1]: mewakili nod datuk nenek;

$parent[1]: mewakili nod datuk;

.....dan seterusnya

$akar

Ia ialah objek model paparan nod akar konteks akar, biasanya ditentukan melalui ko.applyBindings, bersamaan dengan $parents[$parents.length - 1].

$komponen

Jika anda berada dalam konteks templat komponen tertentu, $component menentukan komponen itu dan komponen yang ditentukan adalah bersamaan dengan $root. Dalam kes komponen bersarang, ia mewakili komponen yang paling hampir.

$data

Ia mewakili objek viewModel dalam konteks semasa, $data dan $root adalah setara. Dalam konteks mengikat bersarang, parameter ini akan ditetapkan kepada item data semasa.

$data sangat berguna, contohnya, apabila anda ingin merujuk viewModel itu sendiri dan bukannya sifat viewModel.

Ia ialah kemasukan indeks berasaskan 0 tatasusunan dalam pengikatan foreach. Tidak seperti atribut konteks lain, $index boleh diperhatikan, iaitu, ia akan dikemas kini apabila item tatasusunan dikemas kini.

$parentContext

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

Menentukan objek konteks mengikat pada tahap nod induk Perbezaan daripada $parent ialah ia menentukan data dalam nod induk dan bukannya konteks mengikat.

$rowData

Ia ialah nilai viewModel asal dalam konteks semasa Biasanya ia bersamaan dengan $data Walau bagaimanapun, jika viewModel diubah oleh ko dengan observable, $data tidak boleh diperhatikan dan $rowData boleh diperhatikan.