Bootstrap adalah kerangka kerja front-end, hal yang baik untuk membebaskan pengembang web. Ini menunjukkan bahwa UI adalah sangat tinggi, atmosfer dan kelas atas. Secara teori, Anda tidak perlu menulis sederetan CSS. Cukup tambahkan atribut yang sesuai ke tag.
KnockoutJS adalah kerangka kerja MVVM yang diimplementasikan JavaScript. Sangat bagus. Misalnya, setelah menambahkan atau mengurangi item data daftar, tidak perlu menyegarkan seluruh fragmen kontrol atau menulis penambahan JS dan node penghapusan sendiri. Tentukan saja templat dan atribut yang memenuhi definisi sintaksnya. Sederhananya, kita hanya perlu memperhatikan akses ke data.
1. Pengantar Knockout.js
1. Knockout.js dan MVVM
Saat ini, berbagai kerangka kerja front-end luar biasa dan mempesona. Kadang -kadang saya harus menghela nafas bahwa sebagai seorang programmer sangat sulit, selalu ada teknik yang tak ada habisnya untuk dipelajari. Kapan itu akan berakhir, kecuali Anda mengubah! Lautan penderitaan tidak terbatas, dan apakah itu pantai ketika Anda melihat ke belakang terserah Anda!
Knockout.js adalah kerangka kerja front-end ringan berdasarkan mode MVVM. Seberapa ringan itu? Menurut versi terbaru v3.4.0 yang ditampilkan di situs web resmi, hanya 22kb. Ini dapat menangani ikatan antara model data dan DOM antarmuka secara ramah. Yang paling penting adalah ikatannya adalah dua arah. Dengan kata lain, jika model data berubah, data pada DOM antarmuka juga akan berubah. Sebaliknya, jika data pada DOM antarmuka berubah, model data juga akan berubah sesuai. Ini dapat sangat mengurangi jumlah kode front-end kami dan membuat antarmuka kami mudah dipelihara, dan kami tidak lagi harus menulis banyak model data pemantauan acara dan perubahan DOM antarmuka. Blogger akan menggambarkan dua poin ini berdasarkan contoh penggunaan di bawah ini.
Situs web resmi knockout.js: http://knockoutjs.com
Knockout.js Alamat Sumber Terbuka: https://github.com/knockout/knockout
Mode MVVM: Ini adalah model desain untuk membuat antarmuka pengguna. MVVM membagi menjadi tiga bagian, yaitu model, tampilan, dan viewmodel, model adalah model data, tampilan adalah tampilan kami, dan viewmodel adalah model tampilan, digunakan untuk mengikat model data dan elemen DOM pada tampilan. Jika Anda menggunakan WPF dan Silverlight, memahami ini seharusnya tidak menjadi masalah; Bukan masalah untuk tidak menggunakannya. Setelah membaca artikel ini, Anda akan memiliki pemahaman umum.
2. Contoh paling sederhana
Secara umum, jika Anda menggunakan knockout.js dari awal, Anda perlu melakukan setidaknya empat bagian berikut
2.1. Buka situs web resmi untuk mengunduh file knockout.js, dan kemudian mengutipnya ke halaman tampilan.
<skrip src = "~/skrip/knockout/knockout-3.4.0.min.js"> </script>
Catatan: Knockout.js tidak memerlukan dukungan jQuery. Jika proyek Anda membutuhkan operasi terkait jQuery, lihat jQuery; Jika tidak, hanya referensi file di atas.
2.2. Tentukan ViewModel
Apa itu ViewModel? Bahkan, di JS, itu terlihat seperti objek JSON. Kami mendefinisikan ViewModel:
var myviewModel = {name: "lilei", profesi: "software engineer",};2.3. Tentukan tag yang mengikat ikatan data dalam tampilan tampilan
<div> Nama: <label data-bind = "text: name"> < /label> <br /> profesi: <input type = "text" data-bind = "textInput: Profesi" /> < /div>
Catatan: TextInput diperlukan untuk teks yang sesuai dengan tag input, sedangkan teks untuk teks untuk tag biasa diperlukan.
2.4. Aktifkan Ikatan
Setelah melakukan tiga langkah di atas, Anda juga perlu mengaktifkan pengikatan KO
KO.ApplyBindings (MyViewModel);
Dengan melakukan keempat bagian ini, pengikatan data ViewModel paling sederhana pada dasarnya diimplementasikan. Dapatkan efeknya:
Jika Anda cukup hati -hati, Anda akan menemukan bahwa metode KO.ApplyBindings () memiliki dua parameter. Yang pertama adalah ViewModel yang perlu kita ikat, dan apa yang kedua? Dari KO.ApplyBindings (MyViewModel); Kita dapat melihat bahwa parameter kedua adalah parameter opsional, yang mewakili ruang lingkup tag yang terikat ke viewmodel. Misalnya, mari kita ubah kode di atas:
<div> Nama: <label id = "lb_name" data-bind = "text: name"> < /label> <br /> profesi: <input type = "text" data-bind = "textInput: professi" /> </div> ko.ApplyBindings (myviewModel, document.getElementById ("lb_name");Dapatkan hasilnya:
Dari sini kita dapat melihat bahwa parameter kedua mendefinisikan ruang lingkup aksi MyViewModel, yaitu, hanya mengikat label id = "lb_name" akan berlaku. Jika parameter kedua adalah label kontainer seperti div, itu berarti bahwa ruang lingkup pengikatan adalah semua sub-label di bawah div.
3. Atribut Pemantauan
Pada empat langkah di atas, kita tidak dapat melihat efek apa pun. Apa yang kita lihat tidak lebih dari mengikat data objek JSON ke tag HTML. Apa gunanya melakukan ini? Bukankah itu menyulitkan masalah sederhana? Jangan khawatir, saksikan keajaiban segera! Seperti disebutkan di atas, signifikansi paling penting dari KO terletak pada ikatan dua arah. Jadi bagaimana cara mencapai ikatan dua arah kita? Jawabannya adalah memantau atribut.
Dalam KO, ada tiga atribut pemantauan di inti: Observable, DependentObservables, ObservableArray. Makna pengamatan diterjemahkan sebagai pengamatan dan pengamatan. Jika terasa tidak pantas untuk mengatakan bahwa itu adalah atribut pengamatan atau atribut pengamatan, kami akan menyebutnya atribut pemantauan untuk saat ini.
3.1. Observable: Monitoring Properties
Mari kita ubah contoh di atas untuk ini:
<head> <meta name = "viewport" content = "width = device-width"/> <itement> index3 </iteme> <script src = "~/skrip/jquery-1.9.1.min.js"> </script> <skrip src = "~/skrip/knockout/knockout-3.4.4.min.js"> <crips "> <script>: scripts/scripts/knockout/knockout-3.4.4.min.js"> </script = "~/scripts/Knockout/Knockout/Knockout-3.4. Data-bind = "Teks: Name"> </label> <br/> profesi: <input type = "text" data-bind = "TextInput: Profesi"/> </div> <div> <input type = "text" id = "txt_testoBservable"/> </div> <script = "text/javascript"> // 1.define lefine = myview = myview = myview = myview = myview = myview = myview = myview = myview = myview = myview = myview {myview = myview = myview = lefine myview = lefine myvine {script = "javascript"> ko.observable ("lilei"), profesi: "insinyur perangkat lunak",}; // 2. Aktifkan ko.ApplePlyBindings yang mengikat (myViewModel); $ (function () {// Register TextChange Event $ ("#txt_testoBservable"). On ("input", function () {myviewModel.name ($ (ini) .val ());});});Arti dari kalimat ini adalah menambahkan properti nama viewmodel ke properti pemantauan. Properti Nama harus menjadi properti pemantauan. Suatu hal yang ajaib akan terjadi. Mari kita lihat saat kita menulis MyViewModel.:
Nama telah berubah dari properti asli menjadi metode, yaitu, begitu ko.observable () ditambahkan, properti yang sesuai akan menjadi metode. Oleh karena itu, nilai dan penugasan nama perlu ditangani menggunakan myviewModel.name (). Mari kita lihat efeknya:
Keraguan Kode: Jelas bahwa myviewModel.name ($ (ini) .val ()); Kalimat ini memberikan nilai kotak teks saat ini ke properti nama. Karena antarmuka mengikat properti nama, nilai dalam label juga berubah. Atau Anda akan mengatakan bahwa ini dapat dilakukan dengan menggunakan acara TextChange. Selama nilai kotak teks saat ini ditetapkan ke label tag, efek ini dapat dicapai, yang bukan apa -apa. Memang, metode penulisan Anda juga dapat mencapai tujuan, tetapi pentingnya atribut pemantauan kami adalah bahwa ketika nilai nama diubah di mana saja, antarmuka akan berubah sesuai, tanpa menetapkan nilai ke tag label di setiap tempat. Di JS, Anda hanya perlu fokus pada myViewModel.name (). Bukankah itu sangat luar biasa ~~
3.2. DependentObServables: Monitor Properti Ketergantungan
Jika Anda telah membaca atribut pemantauan di atas, Anda belum puas? Mari kita lihat penggunaan atribut ketergantungan pemantauan.
Mari kita ubah kode dan lihat:
<head> <meta name = "viewport" content = "width = device-width"/> <itement> index3 </itement> <script src = "~/skrip/jQuery-1.9.1.min.js"> </script> <script src = "~/skrip/knockout/knockout-3.4.4.min.js"> <pext "> <pext"> <pext "</script </Knockout/Knockout-3.4.0.min.js"> <pext "> <pext"> <pext "</script </scripts/Knockout/Knockout-3.4.4.Min.js"> <pext "> <pext"> <pext "<pext" </script </scripts/Knockout/Knockout-3.4. Data-bind = "TextInput: Name" /> <br /> Profesi: <input type = "text" data-bind = "TextInput: Profesi" /> <br /> /> Deskripsi: <label data-bind = "Teks: des"> < /label> </div> <script type = "text /javascript"> // 1.definisi MyVarelvar Myvarmar Myvarmare = nameLevar Myvarmare = Javascript "> ko.observable ("lilei"), profesi: ko.observable ("software engineer"),}; myviewModel.des = ko.dependentObservable (function () {return "Saya dinamai -" + myviewModel.name () () + ", pekerjaan -" + myviewmodel.piofes. Aktifkan KO.ApplePlyBindings yang mengikat (MyViewModel); </script> </body>Mari kita lihat efeknya:
Keraguan Kode: Dengan menambahkan atribut ketergantungan pemantauan KO.DependentObservable (), nilai atribut DES dapat dipantau pada saat yang sama dengan perubahan nama dan profesor. Jika ada di antara mereka yang berubah, tag des-bound akan memicu perubahan. Keuntungan terbesar dari ini adalah untuk menghindari kesulitan mengoperasikan DOM oleh JS, yang menarik.
3.3. ObservableArray; Monitor array
Selain dua di atas, KO juga mendukung pemantauan objek array. Mari kita lihat contoh:
<head> <meta name = "viewport" content = "width = device-width"/> <itement> index3 </iteme> <script src = "~/skrip/jQuery-1.9.1.min.js"> </script> <script src = "~/skrip/knockout/knockout-3.4.4.min.js"> </script> </script/knockout/knockout/knockout-3.4.4.js "> </script =" ~/script/Knockout/Knockout/Knockout-3.4. Data-bind = "Opsi: DepTarr, OptionStext: 'Name'"> </schect> </div> <div> <input type = "text" id = "txt_testoBservable"/> <input type = "Tombol" id = "btn_test" value = "departemen baru"/> </div <script type = "btn_test" value = "baru departemen"/> </div <script type = "text/javascript" {{{{{{{{btn {{{{{btn {{{btn. " 1, Nama: 'Departemen R&D'}, {id: 2, Nama: 'Departemen Administratif'}, {id: 3, nama: 'Departemen Urusan Manusia'}]); var viewModel = {deptarr: deptarr,}; ko.applybindings (viewModel); var i = 4; $ () () () () () () () ("(" ");" function ("() () () {" ("); {DEPTARR.PUSH ({id: i ++, Name: $ ("#txt_testoBservable"). Val ()});});}); </script> </body>Lihat efeknya:
Keraguan Kode: Metode di atas ko.observableArray () menambahkan pemantauan objek array. Dengan kata lain, di mana saja di JS, selama perubahan array dilakukan pada objek Array Deptarr, UI akan dipicu untuk memberikan yang sesuai. Satu hal yang perlu diperhatikan adalah bahwa array pemantauan sebenarnya adalah objek array yang dipantau itu sendiri, dan tidak dapat dipantau untuk perubahan dalam properti objek anak dalam objek array. Misalnya, kami mengubah acara klik ke ini:
$ (function () {$ ("#btn_test"). on ("click", function () {depTarr [1] .name = "aaa";});});Memengaruhi:
Ini menunjukkan bahwa pemantauan array sebenarnya memantau objek array itu sendiri, dan tidak akan memantau perubahan atribut elemen dalam array. Jika Anda benar -benar perlu memantau perubahan properti objek dalam data, Anda perlu menggunakan ko.observable () untuk properti objek dalam data, dan keduanya digunakan bersama. Jika Anda tertarik, Anda dapat mencobanya.
4. Atribut ikatan data umum di KO
Di atas, kami menggunakan beberapa atribut ikatan data, jadi berapa banyak atribut ikatan data yang ada di KO? Di sini kami mencantumkan beberapa properti yang umum digunakan.
4.1. Teks dan InputText
Teks, sesuai namanya, berarti teks. Atribut yang mengikat ini umumnya digunakan untuk menampilkan teks dengan tag seperti <label>, <span>, <div>, dll. Tentu saja, jika Anda mau, ikatan ini dapat digunakan untuk tag apa pun. Pada dasarnya tidak ada yang bisa dikatakan tentang menggunakannya. Jika ko.observable () tidak digunakan, itu adalah ikatan statis, jika tidak itu adalah ikatan dinamis.
InputText, teks dari tag input, setara dengan atribut nilai tag input.
<div> Nama: <label data-bind = "text: name"> </label> <br/> profesi: <input type = "text" data-bind = "textInput: Profesi"/> </div> //1.define viewmodelvar myviewModel = {name: ko.observable ("lilei", profesi: " Aktifkan KO.ApplyBinding yang mengikat (MyViewModel);4.2. Nilai
Properti pengikat ini umumnya digunakan untuk tag input, yang pada dasarnya mirip dengan inputText di atas. Tetapi nilainya lebih terstandarisasi.
Juga digunakan dengan nilai adalah parameter valueUpdate, yang menunjukkan operasi apa yang dilakukan antarmuka ketika nilai diperbarui. Nilai utama dari ValueUpdate termasuk perubahan/keyup/keypress/afterkeydown, dll. Ini menunjukkan nilai viewmodel yang sesuai dengan nilai saat teks berubah, penyusutan keyboard, menekan keyboard, menekan keyboard, menekan keyboard, dll.
Nama: <input type = "text" data-bind = "value: name, valueUpdate: 'keyup'" /> <br /> var myviewModel = {name: ko.observable ("lilei"),}; // 2. Aktifkan KO.ApplyBinding yang mengikat (MyViewModel);Kode di atas menunjukkan bahwa atribut nilai kotak teks dan atribut nama MyViewModel diperbarui saat keyboard ditutup.
4.3. Diperiksa
Ikatan yang diperiksa umumnya digunakan untuk kotak centang, radio, dan elemen formulir lainnya yang dapat dipilih, dan nilainya yang sesuai adalah tipe bool. Penggunaan nilai pada dasarnya serupa, jadi saya tidak akan mengulanginya.
4.4. memungkinkan
Aktifkan pengikatan umumnya digunakan untuk mengaktifkan elemen label, dan umumnya digunakan untuk mengaktifkan dan menonaktifkan elemen formulir. Berlawanan dengan dinonaktifkan, nilai yang sesuai juga tipe bool.
<Div> <input type = "text" data-bind = "Enable: ismen"/> </div> <script type = "text/javaScript"> // 1.Tefine viewModelvar myviewModel = {name: ko.observable ("lilei"), profesi: ko.observable ("software engineer"), "lilei"), Profesi: ko.observable ("softwareer") ko.observable (40), Ismen: ko.observable (true)}; // 2. Aktifkan KO.ApplePlyBindings yang mengikat (MyViewModel); myviewModel.ismen (false); </script>Karena properti Ismen menjadi salah, semua kotak teks yang sesuai akan menampilkan status yang dinonaktifkan.
4.5. dengan disabilitas
Berlawanan dengan memungkinkan, penggunaannya mirip dengan yang diaktifkan.
4.6. opsi
Di atas, opsi digunakan saat menggunakan SELECT BINDING, yang mewakili himpunan opsi tag pilih, dan nilai yang sesuai adalah array, mewakili sumber data kotak drop-down ini. Pemantauan sumber data ini dapat diaktifkan menggunakan ObservableArray. Lihat di atas untuk digunakan.
4.7.html
Ikatan teks sebenarnya adalah pengaturan dan nilai tag Innertext. Demikian pula, pengikatan HTML juga merupakan pengaturan dan nilai dari dalam HTML. Nilai yang sesuai adalah tag HTML.
4.8. CSS
Ikatan CSS adalah untuk menambah atau menghapus satu atau lebih gaya (kelas) ke elemen DOM. Gunakan format:
<style type = "text/css">. testBold {latar belakang-color: powderblue;} </tyle> <div data-bind = "css: {testbold: myviewModel.name () == 'lilei'}"> aaaa </div> var myviewModel = {name. Insinyur "), usia: ko.observable (40)};Div ini akan menampilkan warna latar belakang.
Jika Anda perlu menambah atau menghapus beberapa gaya, cukup ubah sedikit, misalnya:
<Div Data-bind = "css: {testBold: myviewModel.name () == 'lilei', testborder: myviewModel.profession () == 'php engineer'}"> aaaa </div>4.9. Gaya
Jika fungsi pengikatan CSS adalah untuk secara dinamis menambahkan atau menghapus gaya kelas ke tag, maka fungsi ikatan gaya adalah untuk secara dinamis menambahkan atau menghapus gaya tertentu ke tag. Misalnya:
<div data-bind = "css: {latar belakang-color: myviewModel.name () == 'lilei'? 'Red': 'white'}"> aaaa </div>Jika Anda menambahkan atau menghapus beberapa, cara menggunakan pengikatan CSS
4.10, attr
ATTR Binding terutama digunakan untuk menambah dan menghapus satu atau lebih atribut (termasuk atribut khusus) ke tag, dan mirip dengan CSS.
4.11. Klik
Klik Binding berarti menambahkan metode eksekusi klik acara ke elemen DOM yang sesuai. Dapat digunakan pada elemen apa pun.
<Div> <input type = "tombol" value = "test klik pengikatan" data-bind = "klik: clickfunc" /> </div> var myviewModel = {clickfunc: function () {waspada ($ (event.currentTarget) .val ());};event.currentTarget mewakili elemen DOM yang saat ini diklik. Terkadang untuk kesederhanaan, kami secara langsung menggunakan fungsi anonim untuk mengikat, seperti:
<verv> <input type = "tombol" value = "test klik mengikat" data-bind = "klik: function () {alert ('diklik');}" /> < /div>Namun, cara menulis JS ke HTML ini menyulitkan blogger untuk menerima, dan mereka merasa bahwa relatif tidak nyaman untuk dipertahankan, terutama ketika logika dalam acara klik agak rumit. Oleh karena itu, jika tidak perlu, tidak disarankan untuk menulis fungsi anonim ini secara langsung.
4.12. Yang lain
Untuk semua binding-bind data, Anda dapat melihat pengantar di situs web resmi, dan saya tidak akan mencantumkannya satu per satu di sini. Saat Anda membutuhkannya, buka saja situs web resmi untuk memeriksanya. Lihatlah semua binding yang tercantum di situs web resmi:
5. Transformasi dan hubungan antara objek JSON dan atribut pemantauan
Kita tahu bahwa untuk menghindari metode presentasi langsung dalam berbagai bahasa, secara umum, kami menggunakan data format JSON saat berinteraksi dengan front-end dan back-end. Kami menggunakan model data yang diambil dari back-end melalui permintaan HTTP. Untuk menggunakan beberapa fitur KO kami, kami harus mengubah model data biasa ini menjadi atribut pemantauan KO; Sebaliknya, kami menggunakan atribut pemantauan KO, dan kadang -kadang kami perlu mengubah atribut ini menjadi data JSON biasa dan meneruskannya ke latar belakang. Jadi bagaimana cara mencapai konversi ini?
5.1. Konversi objek JSON ke viewmodel
Misalnya, kami mengambil objek JSON dari latar belakang, lalu mengubahnya menjadi ViewModel kami, dan kemudian mengikatnya ke DOM antarmuka kami.
$ .AJAX ({url: "/home/getData", ketik: "get", data: {}, Success: function (data, status) {var ojson = data;}});Kami mengirim permintaan ke backend, mengambil objek JSON, menetapkan nilai ke Ojson, dan kemudian kami mengonversi OJSON ke ViewModel. Cara yang paling intuitif adalah mengubahnya secara manual. Misalnya, kita bisa melakukan ini:
var myviewModeljson = {deptName: ko.observable (), deptLevel: ko.observable (), deptdesc: ko.observable ()}; ko.Applybindings (myviewModeljson);Kemudian dalam keberhasilan yang diminta oleh Ajax
Sukses: function (data, status) {var ojson = data; myviewModeljson.deptname (ojson.deptname); myviewModeljson.deptlevel (ojson.detPlevel); myviewModeljson.deptdesc (ojson.deptdesc);}Dengan cara ini, melalui pengikatan manual, pengikatan objek JSON ke viewmodel direalisasikan. Keuntungan melakukan ini adalah fleksibilitas, kerugiannya jelas, jumlah kode manual terlalu besar.
Untungnya, dengan open source universal kami, selalu ada orang yang datang dengan cara yang lebih baik. Kita dapat menggunakan komponen knockout.papping untuk membantu kita mengonversi objek antarmuka JSON ke viewmodel.
Knockout.Mapping Alamat Sumber Terbuka: Unduh
Mari kita lihat secara singkat bagaimana itu digunakan, atau contoh di atas. Kami tidak perlu menerapkan definisi viewmodel apa pun. Pertama, kita perlu merujuk ke knockout.mapping.js
<skrip src = "~/skrip/knockout/knockout-3.4.0.min.js"> </script> <skrip src = "~/skrip/knockout/ekstensi/knockout.mapping-latest.js"> </script>
CATATAN: Di sini knock.mapping-fortest.js harus ditempatkan di belakang Knockout-3.4.0.min.js, jika tidak, Ko.Mapping tidak dapat dipanggil.
Kemudian gunakan secara langsung dalam fungsi keberhasilan
Sukses: function (data, status) {var myviewModeljson2 = ko.mapping.fromjs (data); ko.ApplyBindings (myviewModeljson2);}Mari kita lihat efeknya:
Keraguan Kode: Objek JSON yang diambil dari latar belakang melalui permintaan AJAX dengan mudah dikonversi menjadi ViewModel melalui Ko.Mapping.Fromjs (). Bukankah itu tajam? Tentu saja, selain penggunaan ini, Anda juga dapat memperbarui ViewModel yang ada, dan menggunakannya sebagai berikut:
var myViewModelJson = {DeptName: ko.observable(),DeptLevel: ko.observable(),DeptDesc:ko.observable()};ko.applyBindings(myViewModelJson);$(function () {$.ajax({url: "/Home/GetData",type: "get",data: {}, sukses: fungsi (data, status) {ko.mapping.fromjs (data, myviewModeljson)}});});Secara sukses, perbarui ViewModel MyViewModeljson sesuai dengan nilai data.
5.2. Konversi ViewModel ke Objek JSON
Di atas menyebutkan bahwa objek JSON dikonversi menjadi ViewModel, jadi apa yang harus kita lakukan jika kita perlu mengonversi ViewModel ke objek JSON dan meneruskannya ke backend?
Ada dua metode yang disediakan di KO:
• ko.toJs (): Konversi ViewModel ke Objek JSON
• ko.toJson (): Konversi ViewModel ke string JSON serial.
Misalnya, kode kami adalah sebagai berikut:
$(function () {var oJson1 = ko.toJS(myViewModelJson);var oJson2 = ko.toJSON(myViewModelJson);});var myViewModelJson = {DeptName: ko.observable("R&D Department"),DeptLevel: ko.observable("2"),DeptDesc: ko.observable ("grup pengembangan")}; ko.Applybindings (myviewModeljson);Lalu mari kita pantau nilai -nilai OJSON1 dan OJSON2:
Keraguan Kode: Melalui gambar di atas, mudah untuk memahami perbedaan antara kedua metode tersebut. Perlu dicatat di sini bahwa kedua metode ini dibangun ke dalam KO dan tidak memerlukan dukungan komponen pemetaan.
6. Buat atribut ikatan data Anda sendiri
Saya telah membicarakan banyak hal di atas, dan saya akan memperkenalkan beberapa ikatan dan pemantauan dengan KO. Jadi, kadang-kadang, kita perlu menyesuaikan ikatan data kita, seperti: <label data-bind = "mybind: name"> </label>. Persyaratan ini sangat berguna saat merangkum komponen. Bisakah itu diimplementasikan? Tentu.
Dalam Knockout, properti KO.Bindinghandlers disediakan untuk menyesuaikan properti pengikat data. Sintaksnya adalah sebagai berikut:
ko.bindinghandlers.myselect = {init: function (elemen, valueAccessor, allBindingsAccessor, viewModel) {}, update: function (elemen, valueAccessor, allbindingsaccessor, viewmodel) {}};Deklarasikan saja seperti ini, dan kemudian Anda dapat menggunakan pengikat data khusus dalam tag HTML kami.
<Div> <pilih data-bind = "mySelect: $ root"> <option id = "1"> Departemen R&D </pection> <option id = "2"> Departemen Urusan Manusia </pection> <option id = "3"> Departemen Administratif </pect> </pilih> </Div>
MySelect adalah properti pengikat khusus kami. $ root dapat dipahami sebagai inisialisasi untuk saat ini (meskipun penjelasan ini tidak ketat, jika ada penjelasan yang lebih masuk akal, jangan ragu untuk memperbaikinya).
Keraguan Kode: KO.Bindinghandlers di atas dapat digunakan untuk hanya mengimplementasikan properti pengikat khusus. Dua poin perlu dijelaskan:
• init, sesuai namanya, menginisialisasi ikatan khusus. Ini berisi beberapa parameter. Dua parameter pertama umumnya digunakan lebih sering. Parameter pertama mewakili elemen DOM yang menginisialisasi pengikatan khusus, dan parameter kedua umumnya digunakan untuk melewati parameter yang diinisialisasi.
• Perbarui, perbarui callback, ketika atribut pemantauan yang sesuai berubah, metode ini akan dimasukkan. Jika tidak ada panggilan balik yang diperlukan, metode ini tidak dapat dideklarasikan.
Di sini, blogger akan secara singkat menjelaskan penggunaan binding khusus berdasarkan komponen kotak drop-down mutiselect yang telah ia bagikan.
6.1. Mutiselect paling sederhana
Secara umum, jika kita perlu menggunakan KO untuk merangkum beberapa komponen umum, kita perlu menggunakan ko.bindinghandlers kita. Blogger akan membahas cara menggunakannya dalam kombinasi dengan komponen mutiselect.
Pertama -tama nyatakan ko.bindinghandlers yang disesuaikan, dan inisialisasi tag pilih kami dalam metode init
ko.bindinghandlers.myselect = {init: function (elemen, valueAccessor, allBindingsAccessor, viewModel) {$ (elemen) .multiselect ();}, update: function, valueAccessor, allbindingsaccessor, viewModel) {}};Kemudian gunakan di tag halaman
<Div style = "Text-Align: center;"> <pilih data-bind = "mySelect: $ root"> <option id = "1"> departemen litbang </pection> <option id = "2"> Departemen Urusan Manusia </opsi> <opsi id = "3"> departemen administrasi </pect> </pilih> </div>
Bagian ketiga terakhir, aktifkan ikatan
$ (function () {var multiselect = {}; ko.ApplyBindings (multiselect);});Jika Anda tidak perlu melewati parameter, Anda hanya perlu mengikat viewmodel kosong. Beberapa orang bingung, tetapi bagian ketiga tidak merasa praktis. Pemahaman blogger adalah bahwa elemen DOM perlu menggunakan data-pengikat untuk mengikat data, dan pengikatan KO harus diaktifkan, yaitu ko.Applybinding () di sini.
Dapatkan efeknya:
6.2. Parameter Passing
Langkah pertama adalah menyesuaikan ko.bindinghandlers
ko.bindinghandlers.myselect = {init: function (elemen, valueAccessor, allBindingsAccessor, viewModel) {var oparam = valueAccessor (); $ (elemen) .multiselect (oparam);}, pembaruan: fungsi (elemen, valueaccessor, allbindingsaccessor, viewmodor, {function (elemen, valueaccessor, allbindingsaccessor, viewmod, {function {valueaccessor, allBindingsaccessor, allbindingsaccessor, allbindingsaccessor, {function {valueaccessor, allBindingsacecor, allBindingsaccessor, allBindingsacecor,Langkah kedua sama seperti di atas, gunakan pengikatan khusus ini di tag HTML.
Langkah 3: Lulus dalam parameter saat mengaktifkan pengikatan
$ (function () {var multiselect = {enableClickableOptgroups: true, // collapse grouping onchange: function (opsi, checked) {alert ("pilih ubah");}}; ko.Applybindings (multiSelect);});Melalui tiga langkah ini, Anda dapat meneruskan parameter ke inisialisasi mutiselect kami:
Kueri Kode: Parameter kedua dari acara init, kami katakan, fungsi utamanya adalah untuk mendapatkan parameter yang ditransmisikan dari ViewModel kami, tetapi di sini kami perlu menggunakannya sebagai metode. Mengapa digunakan begitu banyak sisa yang harus dipelajari!
2. Contoh pertama penambahan, menghapus, memodifikasi dan mencari
Pada titik ini, hal -hal dasar akhirnya ditata. Saya awalnya berencana untuk menyelesaikannya dalam satu artikel, tetapi saya tidak berharap hal -hal dasar akan diperluas begitu banyak! Contoh penambahan, menghapus, memodifikasi dan memeriksa disertakan dalam artikel berikutnya. Bootstraptable dan knockoutJs bergabung untuk mewujudkan fungsi menambahkan, menghapus, memodifikasi dan memeriksa [2]. Selamat datang untuk belajar dan berkomunikasi, dan tentu saja Anda juga dipersilakan untuk merekomendasikannya!