Dalam artikel Pengalaman Pembelajaran KnockoutJs sebelumnya (I) KO, disebutkan metode pengikatan data-bind = "xx: oo" dalam KO tidak hanya dapat mengikat teks, nilai, dll., Tetapi juga mengikat alur yang terlihat, gaya dan penampilan lainnya, klik, tekstinput dan peristiwa lainnya, dan bahkan aliran program kontrol. Berbagai bundel mewah pasti akan memuaskan fantasi Anda.
Berikut ini secara singkat berbicara tentang penggunaan berbagai binding, yang terutama dibagi menjadi tiga jenis: representasi, proses dan interaksi sesuai dengan properti terikat.
Atribut kinerja
Atribut pengikat kelas presentasi termasuk Visible, Text, HTML, CSS, Style, dan Attr. Kecuali untuk kelas yang CSS mewakili CSS, yang lainnya mudah dimengerti. Tentu saja, penamaan dalam gaya harus konsisten dengan JS, dan harus dihapus - diubah menjadi penamaan unta, seperti yang ditunjukkan di bawah ini:
<!-HTML Code-> <Div Data-bind = "Visible: harusshowMessage"> Anda akan melihat pesan ini hanya ketika "harusshowmessage" memegang nilai sebenarnya. </div> <div> Pesan hari ini adalah: <span data-bind = "Teks: myMessage"> </span> </Div Data-bind = "hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts: hts-bind =" HTMESSAGE " ProfitWarning: CurrentProfit () <0} "> Tes pengikat kelas CSS </div> <div data-bind =" style: {color: currentprofit () <0? viewModel = { shouldShowMessage: ko.observable(true), // Message initially visiblemyMessage: ko.observable(), // Initially blankdetails: ko.observable(), // Initially blankcurrentProfit: ko.observable(150000), // Positive value, so initially we don't apply the "profitWarning" ClassCurrentProfit: ko.observable (150000), // nilai positif, jadi awalnya blackurl: ko.observable ("tahun-end.html"), urltitle: ko.observable ("Laporan termasuk statistik akhir tahun")}; ko.Applybindings (viewmodel); // Terapkan ikatanEfeknya seperti ini:
Seperti disebutkan dalam artikel sebelumnya, selain atribut individu XXOO, Anda juga dapat melewati objek JSON, yaitu, Anda dapat menggabungkan atribut yang mengikat, seperti:
<!-kode html-> <div data-bind = "{visible: harusshowmessage, teks: mymessage, css: {profitwarning: currentprofit () <0}}"> Anda akan melihat pesan ini hanya ketika "harusshowmessage" memegang nilai sejati. </Div>Tentu saja efeknya seperti ini:
Pengaturan kelas presentasi relatif sederhana. Satu hal yang perlu diperhatikan adalah bahwa banyak kelas presentasi tidak perlu diubah secara dinamis. Pada saat ini, Anda dapat menggunakan pengaturan ViewModel untuk mencapai inisialisasi data terpusat, tetapi tidak mengaturnya menjadi yang dapat diamati, seperti:
// js codevar viewModel = {harusshowmessage: ko.observable (true), // pesan awalnya visiblemysage: 'Teks ini tidak memerlukan pembaruan dinamis' // awalnya kosong};Atribut kelas proses
Kelas proses termasuk foreach, if, ifnot, dengan dan lebih canggih "komponen" binding. Jika dan IFNOT mirip dengan terlihat. Perbedaannya adalah: jika akan secara langsung menghapus komponen yang sesuai dari DOM, sementara yang terlihat hanya mengontrol tampilan tersembunyi, dan komponen masih ada di DOM. dengan memiliki efek yang sama seperti di JS, yaitu untuk memperpanjang rantai lingkup. Secara sederhana, itu adalah menambahkan 'awalan.' sebelum variabel. Di sini saya hanya akan memperkenalkan foreach, dan komponen ditempatkan bersama dengan pengikatan template.
Lihat kodenya:
<!-HTML Code-> <p> Tes Foreach Binding </p> <ul data-bind = "foreach: people"> <li> Tidak. <Span data-bind = "text: $ index"> </span> nama orang: <span data-bind = "name"> </span> <a href = "#"#"Data-bind =" click: $ click. href = "#" data-bind = "klik: hapus"> hapus </a> </li> </ul> <input type = "tombol" data-bind = "klik: addPeople" value = "add"/> var listModel = function () {// Tetapkan nilai array orang (orang sebenarnya adalah array fungsi). Gunakan foreach untuk melintasi objek array // ul, li sesuai dengan anak -anak orang dan manusia. Oleh karena itu, ketika mengikat secara internal Li, ruang lingkupnya ada pada anak -anak {name ...}. Untuk menghubungi orang di luar orang, $ induk diperlukan // jika disebut hapus secara internal, ini di lepas {name ...} sesuai dengan item Li saat ini, dan ruang lingkupnya adalah domain saat ini, tidak diperlukan $ induk. this.people = ko.observableArray ([{{name: "Mark zake", hapus: function () {that.people.remove (ini); // Perhatikan objek saat ini (yaitu {name ...}) dan ruang lingkup. {that.people.remove (this);}}, {name: "Green Deny", ramping: function () {that.people.remove (this);}}]); // adpeople menyebut metode dari tingkat orang yang sama secara internal. Ini akan berubah, dan ini harus disimpan terlebih dahulu dan diteruskan. Apa yang ingin Anda jalankan adalah ListModel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.ApplyBindings (new ListModel ());Yang lebih mudah dipasangkan di sini adalah korespondensi hierarkis antara simpul DOM dan viewmodel. Pertama, oleskan ikatan foreach pada UL, yaitu, masing -masing Li sesuai dengan setiap anak. Setelah ini sesuai dengan itu, Anda dapat memahaminya sesuai dengan aturan ruang lingkup JS. Berbicara tentang ruang lingkup, saya harus menyebutkan ini. Seperti kata pepatah, saya memperlakukan ini seolah -olah saya adalah cinta pertama saya, dan ini menipu saya ribuan kali. Di sini, Xiaojia menambahkan fungsi hapus ke versi resmi, yang mudah sesuai dengan Remepeople resmi. Sedangkan untuk variabel seperti $ index dan $ induk, cukup pahami secara harfiah.
Atribut kelas interaksi
Akhirnya, saatnya untuk mendapatkan intinya. Alasan terpenting untuk menggunakan KO adalah untuk menangani masalah presentasi UI interaktif dinamis. Di sini kami akan memperkenalkan beberapa binding yang terkait dengan formulir.
(1) Klik Binding
Sintaks: data-bind = "Klik: Klik CLICKHANDLER". Fungsi ClickHandler di sini dapat ada fungsi apa pun, tidak harus fungsi di viewmodel, selama itu dapat dirujuk. Ada beberapa hal yang perlu diperhatikan tentang acara klik:
1. Parameter Pass, KO melewati komponen saat ini sebagai parameter pertama ke fungsi ClickHandler secara default. Perhatikan konteks ikatan saat ini di sini. Misalnya, dalam lingkungan dengan komponen yang dikembalikan akan menjadi komponen dengan komponen saat ini yang Anda inginkan. Jika Anda juga perlu melewati parameter acara, lulus acara sebagai parameter kedua. Jika Anda perlu melewati lebih banyak parameter, Anda perlu membungkusnya dengan fungsi. menyukai:
<tombol data-bind = "klik: function (data, event) {myfunction ('param1', 'param2', data, event)}"> klik saya </button>2. Pengaturan perilaku default (seperti tautan)
KO dilarang oleh perilaku acara default, dan kami biasanya mengikat acara klik untuk tautan dan tidak akan membiarkannya melompat. Namun, jika Anda harus mengaktifkannya, cukup kembalikan true di Clickhandler.
3. Gelembung
KO diizinkan untuk menggelembung secara default. Anda dapat mengatur acara klik untuk tidak menggelembung dengan data-bind = "Klik: ClickHandler, ClickBubble: False".
(2) Ikatan acara
KO menyediakan antarmuka ini bagi pengguna untuk menyesuaikan acara yang mengikat. Mengenai parameter passing, perilaku default, menggelegak, dll., Sama seperti klik mengikat, menggunakan kasing:
<Div> <Div Data-Bind = "Event: {MouseOver: EnableDetails, Mouseout: DisableDetails}"> mouse over Me </div> <div data-bind = "visible: detailSenabled"> detail </div> <script type = "text/javascript"> var viewModel = {{{{{{{{{{{{{{{{{{{{{{{ficle. function () {this.detailsenabled (true);}, disableDetails: function () {this.detailsenabled (false);}}; ko.ApplyBindings (viewModel); </script>(3) Kirim Ikatan
Ini terutama digunakan untuk melakukan beberapa pekerjaan verifikasi. KO akan memblokir tindakan formulir pengiriman default dan mentransfer ke fungsi Bound. Ketika Anda perlu mengirimkan di masa depan, kembalikan true di acara yang mengikat.
PS: Mengapa tidak menggunakan acara klik dalam formulir untuk menanganinya? Karena kiriman awalnya dirancang untuk menangani acara pengiriman, ia juga dapat menerima tindakan pengiriman seperti pengembalian kereta, tetapi klik tidak bisa.
(4) Nilai terikat ke TextInput
Nilai pengikatan dan TextInput di kotak input terlihat serupa, tetapi lebih disarankan untuk menggunakan acara TextInput untuk mengikat, karena TextInput adalah yang baru secara khusus digunakan untuk menangani peristiwa input. Seperti yang dapat Anda lihat di artikel sebelumnya, saat menggunakan input Nilai Binding (kiri), fokus harus dipindahkan dari kotak input sebelum akan diperbarui, sementara TextInput (kanan) segera diperbarui.
Meskipun ikatan nilai juga dapat mencapai efek yang sama dengan TextInput dengan mengatur data-bind = "{value: Price, valueUpdate: 'AfterKeyDown'}", ini tidak kompatibel dengan TextInput di browser.
(5) Opsi Binding (SelectedOptions)
Dalam daftar drop-down, opsi dapat digunakan untuk mengikat nilai anak. Anak bisa menjadi string atau objek JS. Artikel sebelumnya ([KnockoutJs Learning Experience Journey] (1) Ko First Experience) menunjukkan string, dan kali ini saya akan meneruskan objek:
Kode:
<p> Negara Anda: <pilih data-bind = "Opsi: Availablecountries, optionStext: 'countryName', nilai: SelectedCountry, optionCaption: 'Pilih ...'"> </pilih> </p> <div data-bind = "visible: PopulationCountry"> muncul ketika Anda memilih sesuatu-> Anda memiliki Populasi dengan Populasi dengan Population: Text:> selectedCountry().countryPopulation: 'unknown'"></span>.</div><script type="text/javascript">// Constructor for an object with two propertiesvar Country = function(name, population) {this.countryName = name;this.countryPopulation = population;};var viewModel = {availableCountries: ko.observableArray([new Negara ("UK", 65000000), Negara Baru ("AS", 320000000), Negara Baru ("Swedia", 29000000)]), SelectedCountry: Ko.observable () // tidak ada yang dipilih secara default}; ko.Applybindings (viewmodel); </Script>Berikut adalah opsi untuk mengikat opsi kotak daftar, dan nilai digunakan untuk mengikat item yang dipilih. Karena opsi adalah objek JS, Anda perlu menggunakan OptionText untuk menentukan tampilan di kotak daftar. OptionCaption mengacu pada nilai tampilan default ketika tidak ada item yang dipilih. Jika kami mengatur kotak daftar multi-seleksi, maka kami tidak dapat menggunakan nilai untuk mengikat item yang dipilih. Pada saat ini, selectOptions harus digunakan untuk mengikat item yang dipilih.
(6) Binding lainnya: aktifkan/nonaktifkan, hasfocus, checked, uniquename.
Acara ini sangat mudah digunakan, jadi saya tidak akan memperkenalkannya secara detail. Nama uniquen terakhir digunakan untuk mengatur atribut nama unik dari kontrol formulir. Ketika formulir diserahkan ke latar belakang, itu tidak akan dikirimkan ke latar belakang tanpa menetapkan nilai atribut nama, jadi ada fungsi yang mengikat. Ada efek lain yang relatif umum pada Hasfoucus di situs web resmi:
Nama:
Nama: Bert Bertington
Klik nama untuk mengeditnya; Klik di tempat lain untuk menerapkan perubahan.
Mengklik nama di atas dapat diedit, dan kemudian kehilangan fokus dan kemudian menjadi teks biasa. Efek ini cukup sederhana untuk diimplementasikan dengan KO.
Meringkaskan
Artikel ini terutama memperkenalkan metode penggunaan berbagai ikatan di KnockoutJs . Menggunakan kombinasi metode pengikatan ini, Anda dapat membuat halaman UI yang membutuhkan interaksi yang lebih dinamis. Hal terpenting untuk menggunakan metode ini adalah mengingat bahwa semua binding adalah objek fungsi, sehingga Anda dapat beroperasi langsung di HTML, sehingga struktur kode JS kadang -kadang bisa lebih sederhana.
Tutorial resmi: http://knockoutjs.com/documentation/introduction.html