مقدمة: شارك المدون بعض الاستخدامات الأساسية لـ KnockoutJs و Bootstraptable من قبل. كلها تطبيقات أساسية ، وهي غير مغلفة على الإطلاق. إنهم يتجنبون فقط قيمة وتعيين عناصر التحكم HTML ، وهم بعيدًا عن إظهار روعة MVVM. في الآونة الأخيرة ، يخطط المشروع لاستخدام KO رسميًا ، لذا فقد صنع بعض العبوات لـ KO و Bootstraptable ، ويتم مشاركتها هنا للرجوع إليها Park Friends. للحصول على أفكار التعبئة والتغليف ، يرجى الرجوع إلى مدونة Park Master Xiao Qin. إذا كان لدى أصدقاء الحديقة طريقة أفضل ، فلا تتردد في مناقشتها.
مقالات سلسلة Knockoutjs:
يجمع Bootstraptable و KnockoutJs لتحقيق وظيفة إضافة وحذف وتعديل وفحص [1]
يجمع Bootstraptable و Knockoutjs لتحقيق وظيفة إضافة وحذف وتعديل وفحص [2]
1. يعالج ViewModel الأول الاستعلام
لا يزال تنفيذ العرض التوضيحي لمواصلة وظيفة إدارة القسم في المرة الأخيرة. يشرح التوسع التالي عن طريق تدفق البيانات.
1. الخلفية تعيد تنفيذ ViewModel إلى العرض
Action ActionResult INDEX () {var model = new {tableParams = new {url = "/department/getDepartment" ، // pagesizeize = 2 ،} ، urls = new {delete = "/department/delete" ، edit = "/eledit/edit" ، add = "/experice/expl" ، QueryCondition = " عرض (نموذج) ؛}الشك الرمز: يحتوي النموذج الذي تم إرجاعه هنا على ثلاثة خيارات
• TableParams: معلمات تهيئة جدول الصفحة. نظرًا لأن المعلمات الافتراضية محددة في JS ، فإن المعلمات المحددة هنا هي معلمات تهيئة خاصة بالصفحة.
• عناوين URL: مسار عنوان URL يحتوي على طلب الإضافة والحذف والتعديل.
• QueryCondition: شروط الاستعلام في الصفحة.
2. رمز صفحة CSHTML
رمز صفحة index.cshtml كما يلي:
@{layout = null ؛} <! doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> index </title> <link href = "~/content/bootstrap/css/bootstrap.min.css" href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "~/scripts/jQuery -1.9.1.min.js"> </cript> <script src = "~/content/boottrap/boottrap.min src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap table/locale/bootstrap-table-zh-cn.js" </script> <script src = "~/jogout/jogitout-3n4 src = "~/scripts/jackout/jackout-33.4.0.min.js"> </script> <script src = "~/scripts/chickout/extensions/jackout.mapping-latest.js"> </cript> <script src = "~/scripts/mussensions src = "~/scripts/extensions/knockout.bootstraptable.js"> </script> <script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)) ؛ document.getElementById ("div_index")) ؛}) ؛ </script> </head> <body> <div id = "div_index" style = "padding: 0px ؛ overflow-x: hidden ؛ data-bind = "value: querycondition.name"> </viv> <label> الوصف الإداري </label> <viv> <input type = "text" data-bind = "value: querycondition.des"> </viv> <div style = "text-align: right ؛ type = "button" data-bind = "click: queryclick"> Query </utton> </viv> </pump> </viv> </viv> <div id = "toolbar"> <button data-bind = "click: addclick" type = "button"> <span aria-hidden = "true" aria-hidden = "true"> </span> تعديل </button> <button data-bind = "click: deleteclick" type = "button"> <span aria-hidden = "true"> </span> delete </button> </div> <table data-bind = "bootstraptable: bootstabled"> <tr> data-checkebox الاسم </th> <th datafield = "level"> مستوى القسم </th> <th datafield = "des"> الوصف </th> <th data field = "strcreateTime"> وقت الإنشاء </th> </tead> </tead> </table> </viv> </body> </html>الشك في الرمز: مثل المقالة السابقة ، تحتاج إلى اقتباس jQuery ، bootstrap ، قابلة للضرب ، خروج المغلوب وغيرها من الملفات ذات الصلة. فيما يلي الوثيقان التاليان:
• changout.index.js: يغلف الخصائص وروابط الأحداث المتعلقة بصفحة الاستعلام.
• knockout.bootstraptable.js: يتغلف تهيئة bootstraptable وتخصيص طرق ربط خروج بالضربة القاضية.
يتم تغليف جميع تفاعلات الصفحة المذكورة أعلاه في JS العامة ، لذلك ليست هناك حاجة لكتابة عدد كبير من الرموز المكررة مثل عناصر DOM للحصول على المهام ، وربط الأحداث ، وما إلى ذلك على الصفحة. لا يوجد سوى جملتين أعلاه من JS مكتوبة في هذه الصفحة. أليس من السهل جدا؟
3. JS تغليف
دعنا نلقي نظرة على ملف اثنين من JS المذكورة أعلاه ، knockout.bootstable.js و changout.index.js.
(1) knockout.bootstraptable.js
(الوظيفة ($) {// أضف طريقة bootStRaptableViewModel إلى ko.bootstraptableViewModel = function (خيارات) {var that = this ؛ this.default = {toolbar: المعلمات (*) ترقيم الصفحات: صحيح ، // هل عرض ترقيم الصفحات (*) جانبي: "خادم" ، // طريقة تراجع: ترقيم العميل العميل ، صفحات الخادم الخادم (*) الوصلات: 1 ، // تهيئة الصفحة الأولى لتحميلها ، والصفحة الافتراضية: 10 ، // عدد الضواحي المسجلة لكل صفحة (*) ليتم تحديدها (*) الطريقة: "Get" ، البحث: // هل يتم عرض البحث عن الجدول؟ صحيح ، // هل يتم تمكين النقر لتحديد صفوف showtoggle: true ،} ؛ this.params = $ .extend ({} ، this.default ، الخيارات || {}) ؛ // الحصول على سجل محدد this.getSelections = function () {that.bootstraptable ("refresh") ؛} ؛} ؛ // إضافة ko custom ko.bindingHandlers.BootStraptable = {init: element (element ، valueaccessor ، allbindingsaccessor ، viewmodel) {// the the oparam here the fributemodelvar oviewmodel = $ (element) .bootstraptable (oviewmodel.params) ؛ // إضافة طريقة قابلة للتمهيد إلى viewmodel oviewmodel.bootstraPtable = function () {return $ ele.bootstraptable.apply ($ ele ، enduments) ؛ {}} ؛}) (jQuery) ؛الشك الرمز: الكود أعلاه يقوم بشكل أساسي شيئين
1.
2.
إضافة روابط مخصصة KO.
إذا لم يفهم أصدقاء Park استخدام الربط المخصص ، فيمكنك التحقق من أول مشاركتين للمدونة للمدون (واحد) و (اثنان) للحصول على مقدمة مفصلة.
(2) Knockout.index.js
(function ($) {ko.bindingViewModel = function (data ، bindElement) {var self = this ؛ this.queryCondition = ko.mapping.fromjs (data.queryCondition) ؛ this.defaultqueryparams = {queryparams: function (params) {var params = param.offset ؛ return params ؛}} ؛ var tableParams = $ .extend ({} ، this.defaultqueryparams ، data.tableParams || {}) ؛ this.bootstraptable = new Ko.BootStraptableModel (tableParams) ؛ القيمة) {// clear if (typeof (value) == "function") {this ('') ؛ id = "mymodal" tabIndex = "-1" "rob =" dialog "aria-labelledby =" mymodallabel "> </viv> ') ؛ abilog.load (data.urls.edit ، null ، function () {}) ؛ $ ( عند إغلاق المربع المنبثق (يتضمن هذا واضحًا مسح الربط والتطهير في حدث التسجيل) ko.cleannode (document.getElementById ("formedit")) ؛ dialog.remove () ؛ self.bootstraptable.refresh () ؛ self.bootstraptable.getSelections () ؛ if (arrrectedData.Length <= 0 || arrrectedData.length> 1) {Alert ("فقط تحرير سطر واحد في وقت واحد") aria-labelledby = "mymodallabel"> </viv> ') ؛ dialog.load (data.urls.edit ، arrrectedData [0] ، function () {}) ؛ $ ("body"). append (dialog) ؛ dialog.modal (). ربط وتطهير حدث التسجيل) ko.cleannode (document.getElementById ("formedit")) (! arrrecedData || arrregregedData.Length <= 0) {Alert ("الرجاء تحديد سطر واحد على الأقل") ؛ إرجاع ؛} $. ajax ({url: data.urls.delete ، type: "post" ، contentType: "application/json ' {Alert (status) ؛ self.bootstraptable.refresh () ؛}}) ؛} ؛ ko.applybindings (الذات ، bindElement) ؛} ؛}) (jQuery) ؛الشك في الرمز: هذا JS يلف بشكل أساسي السمات وربط الحدث لعناصر الصفحة ، والعديد من الأماكن التي تحتاج إلى شرح
• هذا. فقط من خلال تنفيذ هذه الجملة يمكن أن تتم مراقبة العناصر الصفحات في كلا الاتجاهين.
• self.bootstraptable.refresh (): معنى هذه الجملة هو تحديث بيانات الجدول. إنها في الواقع طريقة التحديث لـ BootStraptable التي تسمى ، لكن المدون يلفها ببساطة في ملف straint.bootstraptable.js.
• Dialog.Load (data.urls.edit ، null ، function () {}): عند إضافة وتحرير ، يتم استخدام طريقة load () من jQuery. تتمثل وظيفة هذه الطريقة في طلب عناصر الصفحة الخاصة بعنوان URL وتنفيذ رمز JS للصفحة المقابلة لعنوان URL. هذه الطريقة قوية للغاية في الإشارة ديناميكيًا إلى ملف JS وتنفيذ الرمز داخل ملف JS.
أخيرًا ، قم بإرفاق الكود المقابل لطريقة getDepartment () الخلفية
[httpget] public jsonresult getDepartment (حد int ، إزاحة int ، اسم السلسلة ، السلسلة des) {var lstres = departmentModel.getData () ؛ if (! string.isnullorempty (name)) (! string.isnullorempty (des)) {lstres = lstres.where (x => x.des.contains (des)). tolist () ؛} lstres.foreach (x => {x.strcreatiTe = x.createTime.toString ("yyyy-mm-dd hh: mm: ss") ؛ lstres.skip (إزاحة). -take (limit) .tolist () ، total = lstres.count} ؛ return json (ores ، jsonrequestbehavior.allowget) ؛}في هذه المرحلة ، يمكن تحقيق وظائف الاستعلام والمقاصة لصفحة الاستعلام.
هل لا يزال لديك سؤال: ماذا لو كنا بحاجة إلى تخصيص أحداث bootstraptable؟ لا يمكن أن ينتقل من خلال ViewModel في الخلفية ، أليس كذلك؟
في الواقع ، لا يمكن تمرير طريقة حدث JS من الخلفية ، لذلك نحتاج إلى تخصيص طريقة المعالجة للحدث في الواجهة الأمامية ، على سبيل المثال ، يمكننا القيام بذلك:
<script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)) ؛ data.tableparams.onloadsucess = function (data) {ALERT ("eventuccess event") ؛ document.getElementById ("div_index")) ؛}) ؛ </script>2. احصل على تحرير ViewModel الثاني
يعالج أحد موديلات ViewModels أعلاه وظائف الاستعلام والحذف ، ولكن إضافة وتحرير أيضًا يتطلب دعم ViewModel آخر. دعنا نلقي نظرة على تنفيذ الحزمة للتحرير.
1. تنفيذ ActionResult
من خلال استعلام الكود أعلاه ، يمكننا أن نعرف أنه عندما ينقر المستخدم على إضافة وتحرير ، سيتم طلب عرض عرض آخر →/قسم/تحرير. دعونا نلقي نظرة على تنفيذ عرض التحرير
ActionResult publicresult edit (Department Model) {var oresmodel = new {editModel = model ، urls = new {submit = model.id == 0؟ "/قسم/إضافة": "/قسم/تحديث"}} ؛ عرض الإرجاع (OresModel) ؛}الشك في الرمز: الرمز أعلاه بسيط للغاية ، وهو إرجاع عرض ViewModel إلى صفحة العرض ، ويحتوي على الكيان المعدل وعنوان URL المقدم. ما إذا كان هذا المفتاح الأساسي هذا الكيان محدد ما إذا كان الالتزام الحالي هو كيان جديد أو كيان تحرير.
2. رمز CSHTML
رمز edit.cshtml كما يلي:
<form form = "formedit"> <div rob = "div> <viv> <div> <button type =" button "data-dismiss =" modal "aria-label =" close "> <span aria-hidden =" true "> × </span> </button> <h4 id =" mymodallabel " لـ = "txt_departmentname"> اسم القسم </label> <إدخال type = "text" name = "txt_departmentname" data-bind = "value: editmodel.name" placeholder = "department name"> </viled> <div> <label for = "txt_departmentlevel" data-bind = "value: editModel.level" placeholder = "evely lister"> </viv> <viv> <label for = "txt_des"> الوصف </label> <إدخال type = "text" name = "txt_des" data-bind = "value: editmodel.des" explonder = "diptive> </div> aria-hidden = "true"> </span> أغلق </button> <button type = "submit"> <span aria-hidden = "true"> </span> حفظ </button> </viv> </form> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.csss src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/changout.edit.js @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)) ؛ Ko.BindingEditViewModel (editdata ، {}) ؛الشك في الرمز: نظرًا لأننا أضفنا BootstrapValidator مكون التحقق ، نحتاج إلى الإشارة إلى JS و CSS ذات الصلة. هذا الملف knockout.edit.js يتغلف بشكل رئيسي خصائص وربط الحدث لصفحة التحرير. دعنا نلقي نظرة على رمز التنفيذ لهذا JS.
3. JS تغليف
كود knockout.edit.js:
(الدالة ($) {ko.bindingedItViewModel = function (data ، adadatorfields) {var that = {} ؛ that.editModel = ko.mapping.fromjs (data.editmodel) ؛ that.default = {message: "التحقق من التحقق" ، arrrecedData = ko.tojs (that.editmodel) ؛ $. ajax ({url: data.urls.submit ، type: "post" ، contentType: 'application/json' {Alert (status) ؛}}) ؛ $ ("#mymodal"). Modal ("Hide") ؛}} ؛ document.getElementById ("formedit")) ؛} ؛}) (jQuery) ؛الشك في الرمز: يلف هذا JS أساسًا خصائص نموذج التحرير وربط الحدث المقدم. منذ استخدام مكون التحقق من bootstrapvalidator ، يكون تقديم النموذج مطلوبًا. في الواقع ، لا ينبغي أن يظهر معرف الصفحة في JS العامة ، مثل "formedit" و "mymodal" أعلاه. يمكن تمرير ذلك كمعلمة ، والتي يجب تحسينها. يمثل ValitatorFiolds المعلمة حقل التحقق من مكون التحقق. إذا كان النموذج لا يتطلب التحقق ، فلا بأس في تمرير JSON فارغ أم لا. لم نفعل التحقق من الميدان في المقالة أعلاه. في الواقع ، بشكل عام ، سيكون للجدول الأساسي حقول أو عدة حقول غير فارغة ، مثل التحقق غير الفارغ لأسماء الأقسام. يتم تغيير الرمز الموجود على صفحة edit.cshtml إلى هذا:
<form form = "formedit"> <div rom = "div> <viv> <div> <button type =" button "data-dismiss =" modal "aria-label =" close "> <span aria-hidden =" true " الاسم </label> <input type = "text" name = "name" data-bind = "value: editModel.name" placeholder = "department name"> </viv> <div> <label for = "txt_departmentlevel"> departlevel </bably> <input type = "text" name = "lister" datial = "value: editmode. placeholder = "departmentlevel"> </viv> <viv> <label for = "txt_des"> الوصف </label> <input type = "text" name = "des" data-bind = "value: editModel.des" playdender = "des" type = "submit"> <span aria-hidden = "true"> </span> حفظ </button> </viv> </viv> </pump> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.css src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/changout.edit.js @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)) ؛ Ko.BindingEditViewModel (editdata ، {name: {devalators: {notempty: {message: 'لا يمكن أن يكون الاسم فارغًا!ثم سيتم التحقق من ذلك تلقائيًا عند تقديمه:
ملاحظة: يتوافق اسم سمة التحقق مع سمة الاسم لعلامة الإدخال ، حتى للقيام بالتحقق ، يجب تعيين سمة الاسم هذه بشكل صحيح.
من الأفضل إرفاق طريقة خلفية لإضافة وحذف وتعديل:
[httppost] public jsonresult add (Department Odata) {DepartmentModel.add (Odata) ؛ Return Json (New {} ، JsonRequestbehavior.allowget) ؛} [httppost] jsonresult update (Department Odata) {departmentmodel.update (Odata) ؛ jsonrequestbehavior.allowget) ؛} [httppost] public jsonresult delete (list <segation> odata) {departmentModel.Delete (Odata) ؛ إرجاع JSON (جديد {} ، jsonrequestbehavior.allowget) ؛}في هذه المرحلة ، يكون تأثير إضافة الصفحة بأكملها وحذفها وتحديثها والتحقق منها على ما يرام. دعونا نلقي نظرة على التأثير لفترة وجيزة:
3. ملخص
ما سبق يلف ببساطة خدمة الإضافة والحذف والتعديل والبحث عن خدمة bootstraptable+KO ، وهي مجرد حزمة أساسية. إذا كنت بحاجة إلى تطبيقها على مشروعك ، فقد تحتاج أيضًا إلى بعض تدابير التحسين البسيطة ، مثل:
1. إذا كان مجرد عرض فيل ، فهل من الأفضل كتابتها مباشرة في صفحة العرض دون إرجاعها من ActionResult في الخلفية ، ويوفر مشكلة التسلسل ومرور المعلمة. هذا يحتاج إلى تحسين.
2. لا ينبغي أن يظهر معرف عنصر الصفحة في JS العامة. يمكن تمرير عنصر الصفحة من خلال المعلمات.
3. إضافة وتحرير طرق الحدث للحصول على الكثير من التعليمات البرمجية المكررة في المربع المنبثق. أفضل طريقة للقيام بهذا الجزء هي تغليف المربع المنبثق في مكون منفصل للاتصال به ، مما يمكن أن يقلل من معظم رمز JS.
4. إذا كان هناك عناصر مربع مختارة من المنسدلة في ظروف الاستعلام والخصائص المعدلة ، فقد تحتاج أيضًا إلى تغليف مصدر البيانات والسمات الأخرى للمربع المنسدل. هذا الجزء شائع جدا. بعد أن قام المدون بفرز العرض التوضيحي ، أضف هذه القطعة.
ما سبق هو الحل لـ BootStrattable + Knockoutjs الذي تم تقديمه بواسطة المحرر لتحقيق الإضافة والحذف والتعديل والبحث (3) أكملت عارضات ViewModels الإضافة والحذف والتعديل والبحث. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!