1. Pendahuluan
Serangkaian artikel ini telah memperkenalkan Bootstrap. Untuk detailnya, silakan periksa artikel ini: "Tutorial Pengantar Bootstrap". Karena dalam proyek terbaru, front-end dibuat oleh ASP.NET MVC + KnockoutJs + Bootstrap. Jadi saya mulai menulis seri ini lagi. Hari ini, mari kita lihat kerangka MVVM dari front -end web - KnockoutJs.
2. Apa itu Knockoutjs?
Siapa pun yang terlibat dalam pengembangan .NET harus tahu bahwa kerangka kerja MVVM terintegrasi dalam WPF, jadi KnockoutJs juga merupakan kerangka kerja MVVM untuk pengembangan web. Sederhananya, manfaat MVVM dipisahkan dari kode tampilan halaman, sehingga proyek front-end dapat dipertahankan dengan lebih baik.
Sebelumnya, ketika kami menulis halaman web, kode JS dan kode HTML dicampur bersama, dan kode diisi dengan sejumlah besar objek DOM. Struktur kode ini sangat membingungkan. Dengan kerangka kerja MVVM, Anda dapat membagi kode JS dan kode HTML, dan bagian operasi data lebih sederhana. Anda hanya perlu mengikat atribut tag yang sesuai untuk ditampilkan melalui sintaks yang sesuai (data-bind), sehingga mempercepat kecepatan pengembangan.
Knockoutjs adalah kerangka kerja MVVM. Bahkan, alih -alih menyebut kerangka kerja, itu harus menjadi perpustakaan kelas MVVM. Karena tidak memiliki kerangka kerja MVVM, itu adalah konsep yang relatif "berat", yang harus mencakup fitur seperti perutean. Namun, tidak ada knockoutjs. Sebagai perbandingan, AngularJS harus disebut kerangka kerja MVVM lebih tepat.
Fungsi utama yang diimplementasikan oleh KnockoutJs adalah sebagai berikut:
Binding Deklaratif: Gunakan sintaks sederhana untuk mengaitkan data model ke elemen DOM. Yaitu, sintaks "ikatan data"
Pelacakan Ketergantungan: Menetapkan hubungan antara data model untuk transformasi dan data bersama. Misalnya, total harga suatu produk adalah jumlah dari harga setiap item produk. Pada saat ini, total harga produk dan item produk dapat digunakan untuk membangun hubungan menggunakan fungsi pelacakan ketergantungan. Artinya, ini berasal dari jumlah dari total harga setiap item komoditas. Hubungan ini dilakukan oleh fungsi yang dihitung di KnockoutJS.
Refresh UI Otomatis: Ketika status model Anda berubah, antarmuka UI akan diperbarui secara otomatis. Ini dilakukan oleh fungsi yang dapat diamati.
Templating: Tulis dengan cepat UI sarang yang kompleks untuk data model Anda. Mirip dengan konsep templat dalam WPF.
Selanjutnya, kami menggunakan contoh spesifik untuk dengan cepat memahami penggunaan knockoutjs.
3. Ikatan deklaratif
Mari kita lihat cara menggunakan sintaks data-bind di KnockoutJs untuk mengikat data model ke elemen DOM.
1. Ikatan satu arah
<! Doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <iteme> demo1-one-way binding </title> <script type = "Text/JavaScript" src = "/unggah/rs/376/pbcx3e1z/script/unggah. <!--one-way binding--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /> </p> </div> <!-skrip ini harus ditempatkan dalam file JS yang sesuai dalam proyek yang sebenarnya, dan kemudian dirujuk dalam HTML melalui tag skrip-> <!-kode JS adalah bagian logika bisnis, sehingga memisahkan logika bisnis dari tahap html, "Fungsi Tampilan". " this.firstname = "tommy"; this.lastname = "li"; } ko.ApplyBindings (viewModel baru ()); </script> </body> </html>
2. Contoh di atas hanya melengkapi operasi pengikatan satu arah. Artinya, dalam contoh di atas Anda akan menemukan bahwa ketika mengubah nilai dalam tag input dan meninggalkan fokus, nilai di atas tidak akan diperbarui. Bahkan, fungsi pembaruan otomatis di KnockoutJs tidak akan ditambahkan secara otomatis, dan fungsi yang sesuai perlu didukung. Fungsi ini adalah fungsi yang dapat diamati. Mari kita lihat contoh ikatan dua arah:
<! Doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <iteme> demo2-bi-directional binding </iteme> <script type = "text/javascript" src = "/unggah/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-binding bi-directional-> <v> <p> Nama depan: <strong data-bind = "TEXT: FirstName"> </strong> </p> <p> name last: Text: firstName "> </strong> </p> <p> name last =" Text: firstName "> </strong> </p> <p> <p> data strong:" Text: firstName "> </strong> </p> <p> name last =" Text: firstname "> </strong> </p> <p> LastName "> </strong> </p> <p> Nama Depan: <input data-bind =" value: firstName "/> </p> <p> Nama belakang: <input data-bind =" value: lastname "/> </p> </div> <script type =" text/javaScript "> function viewModel () {this.fir; fire =" text/javaScript "> function viewModel () {this.fir; this.lastname = ko.observable ("li"); } ko.ApplyBindings (viewModel baru ()); </script> </body> </html>4. Ketergantungan saat melacak
Selanjutnya, mari kita lihat cara menggunakan fungsi yang dihitung di KO untuk melengkapi pelacakan ketergantungan. Kode implementasi dari contoh spesifik adalah sebagai berikut:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <type "DemoAv =" Text/html; charset = UTF-8 "/> <Type" DemoAve3 "Text/html; charset = UTF-8"/<title "DemoAv/Text/html; charset = UTF-8"/<title "DemoAva3 src = "/unggah/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-Binding Bidirectional-> <v> <p> Nama Data: <PRong Data-Bind = "TEKS: FirstName"> </strong> </p> <p> last-bind = "TEXT: FirstName"> </strong> </p> <P> <P Strong Data-Bind = "TEXT: FirstName"> </strong> </p> <p> <p> last-bind = "Text: firstName"> </strong> </p> <p> <p> LastName "> </strong> </p> <p> Nama Depan: <input data-bind =" value: firstName "/> </p> <p> Nama belakang: <input data-bind =" value: lastname "/> </p> <p> Nama lengkap: <strong data-bind =" Teks: fullName "> </strong> </p> pupat Upper </button> </div> <script type = "text/javascript"> function viewModel () {this.firstname = ko.observable ("tommy"); this.lastname = ko.observable ("li"); // Bergantung pada pelacakan this.fullname = ko.Computed (function () {return this.firstname () + "" + this.lastname ();}, this); // Ubah nilai yang dapat diamati melalui kode this.capitalizeLastName = function () {this.LastName (this.LastName (). Toupercase ()); }; } ko.ApplyBindings (viewModel baru ()); </script> </body> </html>Selanjutnya, mari kita lihat contoh menggunakan ikatan deklaratif dan ketergantungan untuk melacak titik -titik kompleks. Kode contoh spesifik adalah sebagai berikut:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <itvev-list "TEXT" TEXT/HTML; charset = UTF-8 "/<iteV-type" Demo4 src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <table> <thead> <tr> <td>Name</td> <td>Amount</td> <td>Price</td> </tr> </thead> <tbody data-bind="foreach: items"> <tr> <td data-bind="text: product.name"></td> <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td> <td data-bind="text: subTotal"></td> <td><a href="#" Data-bind = "Klik: $ root.remove"> Hapus </a> </td> </tbor> </able> <h3> Harga pesanan: <span data-bind = "Teks: harga"> </span> </h3> <tombol data-bind = "klik: addComputer"> Tambahkan komputer </spute </spute </h3> <script tipe = "Teks/" javaScript (addComputer "> Komputer </tombol <script type =" text/javascript ("javaScript =" "NOWDED" "NOLD (TOMPLET" "TOKSI (" TOKSI "" Tombol "" }, {name: "Xiaomi note", harga: 999}, {name: "Macro Notebook", Harga: 4999}]; // Pesanan Fungsi Fungsi kelas () {var self = this; this.items = ko.observableArray ([item baru (produk [0], 1), item baru (produk [1], 2)]); // Total harga pesanan this.price = ko.computed (function () {var p = 0; for (var i = 0; i <self.items (). Length; i ++) {var item = self.item this.remove = function (item) {self.items.remove (item); }; this.addComputer = function () {self.items.push (item baru (produk [2], 1)); }; } // item item item item fungsi (produk, jumlah) {var self = this; this.product = produk; this.amount = ko.observable (jumlah); // Total harga item harga this.subtotal = ko.Computed (function () {return self.amount () * self.product.price;}, self); } ko.ApplyBindings (order baru ()); </script> </body> </html>V. Template
Setelah membaca contoh -contoh di atas, Anda harus benar -benar merasa sangat mudah untuk memulai dengan KO (singkatan dari KnockoutJs). Karena sintaksnya sangat mudah dimengerti, mari kita lihat penggunaan templat di KO.
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <pext "Typeas = Text/html; charset = UTF-8"/<title-type "Demo5" TEXPPL; src = "/unggah/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-Template Binding, konten div adalah tag dalam templat persontemplate-> <! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <Strong Data-Bind = "Teks: Usia"> </strong> </p> </div>-> <div data-bind = "templat: 'personTemplate'"> </div> <script id = "personTemplate" type = "Text/html"> <P> <p> <PRANFOR DATA-BIND = "TEXT: NAME"> </html "> <P> <P> <PERUSAHAAN DATA-BIND =" TEKS: Nama "> </html"> <P> <P> <PRANT usia "> </strong> </p> </script> <script type =" text/javascript "> var viewmodel = {name: ko.observable ('tommy'), usia: ko.observable (28), makeolder: function () {this.age (this.age () + 1); }}; KO.Applybindings (ViewModel); </script> </body> </html> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo6-Template Binding</title> <script type="text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <h2> Peserta </h2> Berikut adalah peserta: <Div Data-Bind = "Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Templat: Templat: Templat: Templat: Templat: Tempiring: Templat: Tempiring: Tempiring: Tempiring: Templat: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: Tempiring: TEMPLATE: TEMPLATE: TEMPLATE: TEMPLATE: } "> </div> <script type =" text/html "id =" personTemplate "> <h3 data-bind =" text: name "> </h3> <p> Usia: <span data-bind =" text: era "> </span> </p> </script> <script type =" text/JavaScript "> functionmodmodmod ({{script type =" Text/JavaScript "> fungsi myviewMod (script> {{{scrips = usia: 27}, {name: 'Frank', usia: 33}]; } ko.ApplyBindings (myViewModel baru ()); </script> </body> </html>Untuk informasi lebih lanjut tentang penggunaan templat, silakan merujuk ke dokumentasi resmi: http://knockoutjs.com/documentation/template-binding.html. Artikel ini hanya mencantumkan penggunaan templat dalam 2.
6. Ringkasan
Pada titik ini, konten awal knockoutjs 'sudah berakhir. Kami akan terus memperkenalkan konten KO kepada Anda di artikel berikutnya. Isi artikel berikutnya akan memperkenalkan cara menggunakan KO untuk membuat proyek yang sebenarnya. Jangan lewatkan.