Pendahuluan: Blogger telah membagikan beberapa penggunaan dasar KnockoutJs dan Bootstraptable sebelumnya. Mereka semua adalah aplikasi dasar, dan mereka tidak dienkapsulasi sama sekali. Mereka hanya menghindari nilai dan penugasan kontrol HTML, dan jauh dari menunjukkan keindahan MVVM. Baru -baru ini, proyek ini berencana untuk secara resmi menggunakan KO, jadi telah membuat beberapa kemasan untuk KO dan Bootstraptable, dan dibagikan di sini untuk referensi oleh Park Friends. Untuk ide pengemasan, silakan merujuk ke Blog Park Master Xiao Qin. Jika teman -teman taman memiliki cara yang lebih baik, jangan ragu untuk mendiskusikannya.
Artikel Seri KnockoutJs:
Bootstraptable dan knockoutjs bergabung untuk mencapai fungsi menambahkan, menghapus, memodifikasi dan memeriksa [1]
Bootstraptable dan knockoutjs bergabung untuk mencapai fungsi menambahkan, menghapus, memodifikasi dan memeriksa [2]
1. Viewmodel pertama menangani kueri
Implementasi demo masih akan melanjutkan fungsi manajemen departemen terakhir kali. Ekspansi berikut menjelaskan oleh aliran data.
1. Latar belakang mengembalikan implementasi viewmodel ke tampilan
index ActionResult Publik () {var model = baru {TableParams = baru {url = "/department/getDepartment", // pageSize = 2,}, urls = baru {delete = "/department/delete", edit = "/department/edit", add = "/department/edit",}, edit = "/department/edit", add = "/department/edit",}, query = "name =", need = ", need =", need = ", need ="/department/edit ",}} {edit ="/department/edit ", add ="/department/edit ",}}} {edit {edit ="/edit = "/edit", edit ", edit", edit = "/edit", edit {edit {edit "/edit"/edit ", View (model);}Keraguan Kode: Model yang dikembalikan di sini berisi tiga opsi
• Tabelparams: Parameter inisialisasi tabel halaman. Karena parameter default didefinisikan dalam JS, parameter yang ditetapkan di sini adalah parameter inisialisasi khusus halaman.
• URL: Jalur URL yang berisi permintaan penambahan, penghapusan dan modifikasi.
• QueryCondition: Kondisi kueri halaman.
2. Kode Halaman Cshtml
Kode halaman index.cshtml adalah sebagai berikut:
@{Tata letak = null;} <! Doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <iteme> index </iteme> <link href = "~/content/bootstrap/css/bootstrap href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "~/scripts/jQuery-1..9.1.min.js"> </Script> <cript src = "~/content/bootstrap/js/bootstrap. src = "~/content/bootstrap-table/bootstrap-able.min.js"> </script> <script src = "~/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "/~/knockout/knockout-3.4 src = "~/skrip/knockout/knockout-3.4.0.min.js"> </script> <skrip src = "~/skrip/knockout/ekstensi/knockout.mapping-latest.js"> </script> <script src = "~/skrip/ekstensi/knockout.index.js"> </script src = "~/skrip/ekstensi/knockout.index.js"> </script> </script src = "~/skrip/ekstensi/knockout.bootstraptable.js"> </script> <script type = "text/javascript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)); KO.Binding.json.jsonconvert.SerializeBark (model)); KO.BINGM document.getElementById("div_index"));});</script></head><body><div id="div_index" style="padding:0px;overflow-x:hidden;"><div><div>Query conditions</div><div><form id="formSearch"><div><label>Department name</label><div><input type="text" Data-bind = "Value: QueryCondition.Name"> </div> <label> Deskripsi departemen </LABEL> <SIV> <INPUT TYPE = "TEXT" DATA-BIND = "Nilai: QueryCondition.des"> </Div> <div style = "Text-Align: Right;"> <Tombol Tombol = "Tombol" Data-Bind-Bind = "Klik Clear: Clear" Clear "> type = "tombol" data-bind = "Klik: queryClick"> kueri </button> </div> </form> </div> </div> <div id = "toolbar"> <tombol data-bind = "klik: addClick" type = "> <span aria-hidden =" true "> </span> Tambah </tombol> <span-bind =" Klik: "Tombol" TAMBUT = "Tombol edk =" aria-hidden="true"></span>Modify</button><button data-bind="click:deleteClick" type="button"><span aria-hidden="true"></span>Delete</button></div><table data-bind="bootstrapTable:bootstrapTable"><tr><th data-checkbox="true"></th><th data-field="Name">Department Nama </t> <-Field Data = "Level"> Level Departemen </th> <-Field Data = "Des"> Deskripsi </th> <-Field Data = "StrCreateTime"> Waktu Penciptaan </tml> </tr> </tead> </table> </div> </hod> </html>Keraguan Kode: Seperti artikel sebelumnya, Anda perlu mengutip jQuery, bootstrap, bootstraptable, knockout dan file terkait lainnya. Berikut adalah dua dokumen berikut:
• Knockout.index.js: merangkum properti dan binding acara yang terkait dengan halaman kueri.
• Knockout.bootstraptable.js: merangkum inisialisasi bootstraptable dan menyesuaikan metode pengikatan knockout.
Semua interaksi halaman di atas dienkapsulasi dalam JS publik, jadi tidak perlu menulis sejumlah besar kode duplikat seperti elemen DOM untuk mendapatkan penugasan, pengikatan acara, dll. Pada halaman. Hanya ada dua kalimat di atas JS yang ditulis di halaman ini. Bukankah itu sangat mudah?
3. Enkapsulasi JS
Mari kita lihat dua file JS yang disebutkan di atas, knockout.bootstable.js dan knockout.index.js.
(1) Knockout.BootStraptable.js
(function ($) {// Tambahkan BootstrapTableViewModel Metode ke ko.bootTraptableViewModel = function (options) {var that = this; this.default = {toolbar: '#toolbar', // wadah yang queryparams: function (param) {param {param {param. parameters (*) pagination: true, //Does pagination display (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize the first page to load, the default first page pageSize: 10, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page untuk dipilih (*) Metode: 'dapatkan', pencarian: true, // Apakah pencarian tabel ditampilkan? Pencarian ini adalah pencarian klien dan tidak akan memasuki server. clicktoselect: true, // Apakah klik untuk memilih baris diaktifkan showtoggle: true,}; this.params = $ .extend ({}, this.default, option || {}); // dapatkan REFORD ini. function () {that.bootstrapTable("refresh");};};//Add ko custom binding ko.bindingHandlers.bootstrapTable = {init: function (element, valueAccessor, allBindingsAccessor, viewModel) {//The oParam here is the bound viewmodelvar oViewModel = valueAccessor();var $ele = $ (elemen) .BootStraptable (oViewModel.params); // Tambahkan metode bootstraptable ke viewModel oViewModel.bootstraptable = function () {return $ ele.bootstraptable.Amply ($ ele, argumen);}}, update: function, elemen, valueAccororer ($ eLE, argumen); {}};}) (jQuery);Keraguan Kode: Kode di atas terutama melakukan dua hal
1. Viewmodel yang disesuaikan diinisialisasi dengan bootstraptable.
2.
Tambahkan binding kustom KO.
Jika teman -teman taman tidak memahami penggunaan ikatan khusus, Anda dapat memeriksa dua posting blog pertama blogger (satu) dan (dua) untuk diperkenalkan secara terperinci.
(2) Knockout.index.js
(function ($) {ko.bindingviewModel = function (data, bindElement) {var self = this; this.queryCondition = ko.mapping.fromjs (data.queryCondition); this.defaultqueryparams = {queryparams: function (param) {var params = {querypariMs: function (param) {var params = {queryparion. param.Offset; return params;}}; var tableParams = $ .extend ({}, this.defaultQueryParams, data.tableParams || {}); this.bootTraptable = new ko.boottraptableviewmodel (tableparParams); // clear event this.clearsclick = function = function (function) (function.) (function.) (function.) (function.) (function.) (function.) (function.) (function. nilai) {// Bersihkan if (typeOf (value) == "function") {this (''); $ ('<div id = "mymodal" tabIndex = "-1" role = "dialog" aria-labeledby = "mymodallabel"> </div>'); dialog.Load (data.urls.edit, null, function () {}); $ ("body"); append (dialog); dialog (dialog) {}); $ ("body"); append (dialog); dialog. {// Hapus ikatan saat menutup kotak pop-up (ini jelas termasuk membersihkan ikatan dan membersihkan peristiwa pendaftaran) ko.cleannode (document.getElementById ("formedit")); dialog.remove (); edit self.bootstraptable.refResh ();});};//edit edit ini = function {function ();};//edit {function ();//edit {function ();};//edit {function ();};//edit {function ();};//edit {function ();};//edit {function ();};//edit {function ();};//edit {function (); oCraptable = function (); self.bootstraptable.getSelection (); if (arrrectectedData.length <= 0 || arrrectectedData.length> 1) {alert ("Hanya mengedit satu baris pada satu waktu"); return;} var dialog = $ ('<div id = "mymodal" tabindex = "-1" role = "dialog" <Div ID = "myModal" tabindex = "-1" rane = "dialog" aria-laBelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, arrrectectedData [0], function () {}); $ ("body"). Append (dialog); dialog. mengikat dan membersihkan peristiwa pendaftaran) ko.cleannode (document.geteLementById ("formedit")); dialog.remove (); self.bootstraptable.refresh ();});}; // hapus peristiwa this.deleteClick = function () {var arrectectedData = bootstrapte. (!arrrectedData||arrrectedData.length<=0) {alert("Please select at least one line");return;}$.ajax({url: data.urls.delete,type: "post",contentType: 'application/json',data: JSON.stringify(arrrectedData),success: function (data, status) {waspada (status); self.bootstraptable.refresh ();}});}; ko.Applybindings (self, bindelement);};}) (jQuery);Keraguan Kode: JS ini terutama merangkum atribut dan pengikatan acara elemen halaman, dan beberapa tempat yang perlu dijelaskan
• this.queryCondition = Ko.mapping.fromjs (data.queryCondition): Tujuan dari kalimat ini adalah untuk mengonversi kondisi kueri yang ditularkan dari latar belakang dari data JSON ke atribut pemantauan. Hanya dengan mengeksekusi kalimat ini dapat atribut dan elemen halaman dipantau di kedua arah.
• self.bootstraptable.refresh (): Arti dari kalimat ini adalah untuk menyegarkan data tabel. Ini sebenarnya adalah metode penyegaran bootstraptable yang disebut, tetapi blogger hanya merangkumnya di file knockout.bootstraptable.js.
• Dialog.Load (data.urls.edit, null, function () {}): Saat menambahkan dan mengedit, metode load () jQuery digunakan. Fungsi metode ini adalah meminta elemen halaman URL ini dan menjalankan kode JS dari halaman URL yang sesuai. Metode ini sangat kuat secara dinamis merujuk pada file JS dan menjalankan kode di dalam file JS.
Akhirnya, lampirkan kode yang sesuai dengan metode latar belakang getDepartment ()
[Httpget] public jsonResult getDepartment (batas int, int offset, name string, string des) {var lstres = departmodel.getData (); if (! String.isnullorEmpty (name)) {lstres = lstres.where (x => x.name.contains (name))). (!string.IsNullOrEmpty(des)){lstRes = lstRes.Where(x => x.Des.Contains(des)).ToList();}lstRes.ForEach(x=> {x.strCreatetime = x.Createtime.ToString("yyyy-MM-dd HH:mm:ss");});var oRes = new{rows = lstres.skip (offset) .take (limit) .tolist (), total = lstres.count}; return json (ore, jsonrequestbehavior.allowget);}Pada titik ini, fungsi kueri dan kliring dari halaman kueri dapat direalisasikan.
Apakah Anda masih memiliki pertanyaan: Bagaimana jika kita perlu menyesuaikan peristiwa Bootstraptable? Tidak dapat ditransmisikan melalui viewmodel di latar belakang, bukan?
Memang, metode acara JS tidak dapat dilewati dari latar belakang, jadi kita perlu menyesuaikan metode pemrosesan acara di ujung depan, misalnya, kita dapat melakukan ini:
<type script = "Text/JavaScript"> $ (function () {var data = @html.raw (newTonsoft.json.jsonconvert.serializeObject (model)); data.tableparams.onloadSuccess = function (data) {alert ("LoadSuccess events"; document.getElementById ("Div_index"));}); </script>2. Dapatkan edit viewmodel kedua
Salah satu viewmodels di atas menangani fungsi kueri dan penghapusan, tetapi menambahkan dan mengedit juga membutuhkan dukungan dari viewmodel lain. Mari kita lihat implementasi paket pengeditan.
1. Implementasi ActionResult
Melalui kueri kode di atas, kita dapat mengetahui bahwa ketika pengguna mengklik pada Tambah dan Edit, tampilan tampilan lain akan diminta →/departemen/edit. Mari kita lihat implementasi tampilan edit
Public ActionResult Edit (Model departemen) {var oresmodel = baru {editModel = model, urls = baru {submit = model.id == 0? "/Department/add": "/department/update"}}; return view (oresmodel);}Keraguan Kode: Kode di atas sangat sederhana, yaitu mengembalikan ViewModel ke halaman View, yang berisi entitas yang diedit dan URL yang dikirimkan. Apakah entitas ini ada kunci primer ditentukan oleh apakah komit saat ini adalah entitas baru atau entitas edit.
2. Kode Cshtml
Edit.cshtml kode adalah sebagai berikut:
<form id="formEdit"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Operation</h4></div><div><div><label for="txt_departmentname">Department Name </LABEL> <INPUT TYPE = "TEXT" NAME = "TXT_DEPARTMENTNAME" Data-bind = "Value: EditModel.name" Placeholder = "Department Name"> </Div> <Div> <label untuk = "txt_departmentlevel"> Level DATAD "DATAD" DATAD "DATAD" DATAD "TXTLEVED" DATAD "TXTLEVED" DATAD "TXTLEVEL"> placeholder="Department Level"></div><div><label for="txt_des">Description</label><input type="text" name="txt_des" data-bind="value:editModel.Des" placeholder="Descriptive"></div><div><button type="button" data-dismiss="modal"><span aria-hidden = "true"> </span> tutup </button> <tombol type = "kirim"> <span aria-hidden = "true"> </span> simpan </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/css/bootstrapssssssssssssssssssssseet" = "cript"/css/css/csss/bootstrapsssssss. src = "~/content/bootstrapValidator/js/bootstrapValidator.js"> </script> <script src = "~/skrip/ekstensi/knockout.edit.js"> </script> <script type = "text/javascript"> $ (function () {var editData = @Html.raw (newtonsoft.json.jsonconvert.serializeObject (model)); ko.bindeditviewModel (editdata, {});Keraguan Kode: Karena kami telah menambahkan komponen verifikasi BootstrapValidator, kami perlu merujuk JS dan CS yang relevan. File ini knockout.edit.js terutama merangkum properti dan pengikatan acara dari halaman edit. Mari kita lihat kode implementasi JS ini.
3. Enkapsulasi JS
Kode Knockout.Edit.js:
(function ($) {ko.bindingEditViewModel = function (data, validatorFields) {var that = {}; that.editModel = ko.mapping.fromjs (data.EditModel); that.default = {pesan: 'verifikasi gagal', fields: {}, {}, {{{pesan: 'field', {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ arrrectectedData = ko.toJs (that.editmodel); $. Ajax ({url: data.urls.submit, ketik: "post", ContentType: 'Application/JSON', data: json.stringify (arrrectedData), Success: function (data, status) {alert (status);}}); $ ("#mymodal"). Modal ("hide");}}; document.getElementById ("FormEdit"));};}) (jQuery);Keraguan Kode: JS ini terutama merangkum properti model edit dan ikatan acara yang dikirimkan. Karena komponen verifikasi BootstrapValidator digunakan, diperlukan pengiriman formulir. Faktanya, ID Page tidak boleh muncul di JS publik, seperti "Formedit" dan "MyModal" di atas. Ini dapat dilewati sebagai parameter, yang perlu dioptimalkan. Parameter ValidatorFields mewakili bidang verifikasi komponen verifikasi. Jika formulir tidak memerlukan verifikasi, tidak apa -apa untuk melewati JSON kosong atau tidak. Kami tidak melakukan verifikasi lapangan dalam artikel di atas. Bahkan, secara umum, tabel dasar akan memiliki satu atau beberapa bidang yang tidak kosong, seperti verifikasi nama departemen yang tidak kosong. Kode pada halaman edit.cshtml diubah ke ini:
<Form ID = "FormEdit"> <Div Role = "Document"> <div> <div> <Tombol type = "Tombol" data-dismiss = "modal" aria-label = "tutup"> <span aria-hidden = "true"> × </span> </tombol> <h4 id = "mymodallabel"> Operasi </h4> </Div> <h4 id = "mymodallabel"> Operasi </h4> </Div> <h4 id = "mymodallabel"> Operasi </h4> </Div> <h4 id = "mymodallabel"> Operasi </h4> </Div> <h4 id = "mymodallabel"> operasi </h4> </div> <h4 id = "mymodallabel"> Operation </h4> </Div> name</label><input type="text" name="Name" data-bind="value:editModel.Name" placeholder="department name"></div><div><label for="txt_departmentlevel">Departmentlevel</label><input type="text" name="Level" data-bind="value:editModel.Level" placeholder="Departmentlevel"></div><div><label for="txt_des">Description</label><input type="text" name="Des" data-bind="value:editModel.Des" placeholder="Des"></div><div><button type="button" data-dismiss="modal"><span aria-hidden="true"></span>Close</button><button type = "kirim"> <span aria-hidden = "true"> </span> save </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.css" rel = "stylesheet"/<skrip src = "~/content/bootstrapValidator/js/bootstrapValidator.js"> </script> <script src = "~/skrip/ekstensi/knockout.edit.js"> </script> <script type = "text/javascript"> $ (function () {var editData = @Html.raw (newTonsoft.json.jsonconvert.serializeObject (model)); ko.bindingDitViewModel (editData, {name: {validators: {notempty: {pesan: nama tidak bisa kosong! '}}}};Maka itu akan diverifikasi secara otomatis saat mengirimkan:
Catatan: Nama atribut verifikasi sesuai dengan atribut nama tag input, jadi untuk melakukan verifikasi, atribut nama ini harus diatur dengan benar.
Yang terbaik adalah melampirkan metode latar belakang untuk menambahkan, menghapus dan memodifikasi:
[Httppost] public jsonResult add (department odata) {departmentmodel.add (odata); return json (baru {}, jsonrequestbehavior.allowget);} [httppost] pembaruan jsonResult (department odata) {departmentModel.update (odata odata (department odata) {DepartmentModel.update (odata (odeppost (odata department oData) {DepartmentModel.update (odata) {DepartmentModel.Update (odata) {DepartmentModel.Update (odata) {departmentModel.Update (odata Department (odata DepartmentModel.Update (odata) Jsonrequestbehavior.allowget);} [httppost] public JsonResult delete (Daftar <department> odata) {departmentModel.delete (odata); kembalikan json (baru {}, jsonrequestbehavior.allowget);}Pada titik ini, efek menambahkan, menghapus, memodifikasi, dan memeriksa seluruh halaman OK. Mari kita lihat efeknya secara singkat:
3. Ringkasan
Di atas hanya merangkum penambahan, penghapusan, modifikasi, dan layanan pencarian dari Bootstraptable+KO, yang hanya merupakan paket utama. Jika Anda perlu menerapkannya pada proyek Anda, Anda mungkin juga memerlukan beberapa langkah optimisasi sederhana, seperti:
1. Jika itu hanya viewmodel dari sebuah halaman, dapatkah lebih baik menulisnya langsung ke halaman tampilan tanpa mengembalikannya dari ActionResult di latar belakang, dan menghemat masalah serialisasi dan lewat parameter. Ini perlu dioptimalkan.
2. ID elemen halaman tidak boleh muncul di JS publik. Elemen halaman dapat diteruskan melalui parameter.
3. Tambah dan edit metode acara untuk memiliki banyak kode duplikat di kotak pop-up. Cara terbaik untuk melakukan bagian ini adalah dengan merangkum kotak pop-up menjadi komponen terpisah untuk menyebutnya, yang dapat mengurangi sebagian besar kode JS.
4. Jika ada elemen kotak drop-down terpilih dalam kondisi kueri dan properti yang diedit, Anda mungkin juga perlu merangkum sumber data dan atribut lain dari kotak drop-down. Bagian ini sangat umum. Setelah blogger memilah demo, tambahkan bagian ini.
Di atas adalah solusi untuk bootstraptable + knockoutJs yang diperkenalkan oleh editor untuk mencapai penambahan, penghapusan, modifikasi, dan pencarian (3) dua viewmodels telah menyelesaikan penambahan, penghapusan, modifikasi, dan pencarian. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!