Menggabungkan BootstrapTable dengan KnockoutJS untuk melaksanakan penambahan, pemadaman, pengubahsuaian dan fungsi pertanyaan [1]_javascript kemahiran
PHP中文网
Lepaskan: 2019-07-11 11:33:02
asal
3936 orang telah melayarinya
Bootstrap ialah rangka kerja bahagian hadapan yang membebaskan perkara yang baik untuk pembangun web UI yang dipersembahkan adalah sangat mewah dan bergaya Secara teori, tidak perlu menulis baris css. Cuma tambahkan atribut yang sesuai pada teg.
KnockoutJS ialah rangka kerja MVVM yang dilaksanakan dalam JavaScript. sangat sejuk. Sebagai contoh, selepas item data senarai ditambah atau dipadamkan, tidak perlu memuat semula keseluruhan serpihan kawalan atau menulis JS untuk menambah atau memadam nod sendiri Anda hanya perlu mentakrifkan templat dan atribut yang mematuhi sintaksnya takrifan. Ringkasnya, kita hanya perlu fokus pada capaian data.
1. Pengenalan kepada Kalah Mati.js
1
Pada masa kini, pelbagai rangka kerja hadapan amat menggembirakan dan mempesonakan Kadang-kadang saya perlu merungut bahawa menjadi seorang pengaturcara sememangnya sukar untuk dipelajari. melainkan anda Berubah! Lautan penderitaan tidak terbatas, terpulang kepada anda untuk memutuskan sama ada anda mahu berpatah balik atau pergi ke pantai!
Knockout.js ialah rangka kerja bahagian hadapan yang ringan berdasarkan corak MVVM Seberapa ringannya? Menurut versi terkini v3.4.0 yang ditunjukkan di laman web rasmi, ia hanya 22kb. Ia boleh mengendalikan pengikatan model data dan antara muka DOM dengan cara yang mesra Perkara yang paling penting ialah pengikatannya adalah dua hala, yang bermaksud bahawa jika model data berubah, data pada antara muka DOM juga akan berubah mengikut sebaliknya, antara muka DOM akan berubah dengan sewajarnya Jika data pada pangkalan data berubah, model data juga akan bertindak balas terhadap perubahan ini. Ini boleh mengurangkan jumlah kod bahagian hadapan kami dan menjadikan antara muka kami mudah diselenggara. Kami tidak lagi perlu menulis banyak model data pemantauan acara dan perubahan DOM antara muka. Blogger di bawah akan menggambarkan dua perkara ini berdasarkan contoh penggunaan.
Tapak web rasmi Knockout.js: http://knockoutjs.comAlamat sumber terbuka Knockout.js: https://github.com/knockout/knockout Corak MVVM: Ini ialah corak reka bentuk untuk mencipta antara muka pengguna membahagikannya kepada tiga bahagian: Model, View dan Model View ialah model data, View ialah pandangan kami dan ViewModel ialah model paparan yang digunakan untuk mengikat. Elemen DOM di atas model dan paparan data. Jika anda telah menggunakan WPF dan Silverlight, memahami perkara ini tidak sepatutnya menjadi masalah jika anda tidak menggunakannya, tidak mengapa Selepas membaca artikel ini, anda akan mempunyai pemahaman umum.
2 Contoh paling mudah
Secara umumnya, jika anda mula menggunakan Knockout.js dari awal, Anda perlu untuk melakukan sekurang-kurangnya empat langkah berikut
2.1, Pergi ke tapak web rasmi untuk memuat turun fail knockout.js, dan kemudian petikannya ke dalam halaman paparan.
Nota: Teks yang sepadan dengan teg input perlu menggunakan input teks, manakala teks teg biasa boleh menjadi teks.
2.4. Aktifkan pengikatan
Selepas melengkapkan tiga langkah di atas, anda juga perlu mengaktifkan pengikatan kalah mati
ko.applyBindings(myViewModel);
Salin selepas log masuk
Dengan melakukan empat langkah ini, pengikatan data model pandang yang paling mudah pada dasarnya direalisasikan. Jika anda cukup berhati-hati, anda akan mendapati kaedah ko.applyBindings() mempunyai dua parameter Yang pertama ialah model pandangan yang perlu kita ikat. Daripada ko.applyBindings(myViewModel); kita dapat melihat bahawa parameter kedua ialah parameter pilihan, yang mewakili skop label yang terikat pada model pandangan Sebagai contoh, kita menukar kod di atas:
Ia boleh dilihat bahawa parameter kedua mengehadkan skop myViewModel, iaitu, ia hanya akan berkuat kuasa jika ia terikat pada teg dengan id="lb_name". parameter ialah teg bekas div, ini menunjukkan bahawa skop pengikatan adalah semua sub-tag di bawah div.
3. Memantau sifat
Sehingga empat langkah di atas, kita tidak dapat melihat apa-apa kesan, yang kita lihat hanyalah Apakah gunanya mengikat data objek json ke teg html? Tidakkah ia merumitkan masalah mudah? Jangan risau, saksikan keajaibannya sekarang! Seperti yang dinyatakan di atas, kepentingan kalah mati yang paling penting ialah pengikatan dua hala, jadi bagaimana untuk mencapai pengikatan dua hala kami? Jawapannya ialah memantau hartanah.
Dalam kalah mati, terdapat tiga atribut pemantauan teras: Observables, DependentObserve, dan ObservableArray bermakna pemerhatian rasanya tidak sesuai untuk memanggilnya atribut pemerhatian atau atribut pemerhatian .
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn