في المقالة السابقة ، قدمت لك مزيجًا من bootstraptable و jackoutjs لتنفيذ وظائف الإضافة والحذف والتعديل والبحث [1] ، وقدمت بعض الاستخدامات الأساسية لـ straint.js. بعد ذلك ، سنستمر في تقديمه لك من خلال هذه المقالة. إذا كنت تخطط لاستخدام KO للقيام بالمشاريع ، فلنلقي نظرة!
Bootstrap هو إطار عمل أمامي ، وهو أمر جيد لتحرير مطوري الويب. إنه يوضح أن واجهة المستخدم هي متطورة للغاية ، في الغلاف الجوي والراقية. من الناحية النظرية ، لا تحتاج إلى كتابة خط من CSS. فقط أضف السمات المناسبة إلى العلامة.
Knockoutjs هو إطار MVVM من جافا سكريبت. جيد جدًا. على سبيل المثال ، بعد إضافة أو تقليل عناصر بيانات القائمة ، ليست هناك حاجة لتحديث جزء التحكم بأكمله أو كتابة عقد الإضافة وحذف JS بنفسك. فقط حدد القالب والسمات التي تلبي تعريفات بناء الجملة. ببساطة ، نحتاج فقط إلى الانتباه إلى الوصول إلى البيانات.
1. معاينة التأثير
في الواقع ، ليس لها أي تأثير. إنها مجرد إضافة بسيطة وحذف وتعديل وبحث. المفتاح لا يزال على الكود. يمكن أن يؤدي استخدام KO إلى توفير الكثير من عمليات ربط بيانات DOM الواجهة. فيما يلي رمز JS للمنطق الكامل لإضافة وحذف وتعديل والبحث:
تأثير الصفحة:
2. أمثلة رمز
حسنًا ، دعنا نصل إلى هذه النقطة! يخطط المدون لتقديمه في جزأين. الجزء الأول هو جزء تهيئة الجدول ، والجزء الثاني هو إضافة زر التشغيل والحذف والتعديل.
1. تهيئة الجدول
1.1. تحضير
انظر أولاً إلى ملفات JS و CSS التي تحتاج إلى الرجوع إليها
<link href = "~/content/bootstrap/css/bootstrap.min.css" rel = "STYLESHEET"/> <link href = "~/content/bootstrap-table/bootstrap-dable.min.css src = "~/scripts/jquery -1.9.1.min.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.min.js"> </cript> <script src = "~/content/bootstrap-table/bootstrap-dable.ms src = "~/content/bootstrap-table/accale/bootstrap-table-zh-cn.js"> </script> <script src = "~/scripts/knocpts/jackout-3.4.0.min.js"> </cript> <script src = "~/jackout/jackout/quickout src = "~/content/bootstrap-table/knockout.bootstraptable.js"> </script> <script src = "~/scripts/department.js"> </script>
كلها شائعة الاستخدام CSS و JS. لدينا بشكل أساسي ملفان JS مخصصان: changout.bootstraptable.js و department.js. في المقالة السابقة ، قدمنا أنه يمكن لاستخدام KO تخصيص عمود البيانات الخاص بنا. وبالمثل ، بالنسبة لربط الجدول ، نحدد أيضًا الربط المخصص ، رمزًا داخل straint.bootstraptable.js.
// إضافة ko custom ko.bindingHandlers.MyBootStraptable = {init: function (element ، valueaccessor ، allbindingsaccessor ، viewmodel) {// the oparam here espointtraptiplvar ؛ // adiewmoDeln ؛ طريقة bootstraptable لعرض model oviewmodel.bootstraptable = function () {return $ ele.bootstraptable.apply ($ eLe ، endress) ؛}} ، update: function (element ، valueAccessor ، allBindingSaccors ، viewModel) {}} ؛ ko.bootstraPtableViewModel = function (chors) {var that = this ؛ this.default = {search ، MIMINMONTCOUNTCOLURTS: 2 ، // الحد الأدنى لعدد الأعمدة المسموح به CLACKTOSELECT: RERRES ؛} ؛ // refresh this.refresh = function () {that.bootstraptable ("refresh") ؛} ؛} ؛}) (jQuery) ؛الشك الرمز: ملف JS هذا يقوم بشكل أساسي شيئين
1. تخصيص خاصية بيانات البيانات myBootStraptable. بالنسبة لطريقة التحديث في ko.bindingHandlers.MyBootStraptable ، ليس من الضروري تحديدها.
2. تغليف bootstraptable عن طريق إضافة bootstraptableViewModel إلى كائن KO.
1.2. ابدأ في ربط علامة HTML
<table id = "tb_dept" data-bind = "myBootStraptable: $ root"> <tr> <th data-checkbox = "true"> </h> <th data-field = "name"> اسم القسم </th> <th data-field = "level"> الوقت </th> </tr> </teaad> </table>
الشك في الرمز: حدد علامة الجدول واستخدم الربط المخصص لـ MyBootStraptable. كما ذكر في المقالة السابقة ، يمكن فهم جذر $ على أنه معنى التهيئة. للبساطة ، تتم كتابة جميع الأعمدة مباشرة في <h>.
1.3. تنشيط ربط KO
بعد تحميل الصفحة ، ابدأ ربط KO:
. "/قسم/getDepartment" ، // طلب url (*) الطريقة: 'get' ، // request method (*) شريط الأدوات: '#toolbar' ، // أي الحاوية المستخدمة في button button queryparams: function (param) {return {limit: param.limit ، Offset: param.offset} ؛ Sidepagination: "Server" ، // طريقة تراجع: تراجع العميل ، قمامة خادم خادم (*) PAGENUMBER: 1 ، // تهيئة الصفحة الأولى للتحميل ، PAGES PAGESIRE الافتراضي: 10 ، // عدد خطوط السجلات لكل صفحة (*) PAGELIST: [10 ، 25 ، 50 ، 100] ، document.getElementById ("tb_dept")) ؛}} ؛الشك في الرمز: بعد تحميل الصفحة ، اتصل بكائن bootstraptableViewModel المغطى أعلاه لدمج المعلمات التي تم تمريرها ، وأخيراً تنشيط الربط ، وقم بتنشيط this.myViewModel باعتباره عرض ViewModel. يوضح رمز التصحيح أنه عندما يكون ko.applybindings (this.myViewModel ، document.getElementById ("tb_dept")) ؛ يتم تنفيذها ؛ سوف يصبح الربط المخصص ساري المفعول وسيدخل البرنامج طريقة init لـ KO.BindingHandlers.MyBootStraptable كائن لتهيئة bootstraptable. هذه نقطة يتم شرحها:
init: function (element ، valueaccessor ، allbindingsaccessor ، viewModel) {// oparam هنا هو مقربة من ViewModelvar oviewModel = valueAccessor () ؛ var $ eLe = $ (element) .bootStraptable (OvIewModel.params) ؛ $ ele.bootstraptable.apply ($ ele ، enciles) ؛}}في طريقة init أعلاه ، من خلال المعلمة الثانية ValueAccessor ، نحصل على ViewModel Bound حاليًا ، وهو هدف This.myViewModel أعلاه. يعتقد المدون أن هذا يفضي إلى فهمك لمنطق الربط المخصص. في الأساس ، عندما نقوم بتنفيذ هذه الجملة var $ ele = $ (element) .BOOTSTRATTERATION (OVIEWMODEL.Params) ؛ ، تم إكمال تهيئة الجدول الخاصة بنا. يحدد المدون مجموعة للطريقة المقابلة في الخلفية. من أجل الاكتمال ، سأقوم بنشره هنا:
DepartmentController
2. عملية زر
ما ورد أعلاه هو استخدام مجموعة البيانات المخصصة لدينا من خلال تهيئة bootstraptable. دعنا نختبر "Shuangweiwai" باستخدام سمات المراقبة باستخدام عملية الزر أدناه.
2.1. عرض الصفحة
أولاً ، حدد زر الإضافات الإضافية في صفحة العرض
<div id = "شريط الأدوات"> <button id = "btn_add" type = "button"> <span aria-hidden = "true"> </span> إضافة </button> <button id = "btn_edit" type = "button"> <span aria-hidden = "true"> </span> </button> button> aria-hidden = "true"> </span> حذف </button> </viv>
من أجل البساطة ، استخدم المدون مربعًا منبثقًا مخفيًا لاحتواء مربعات نصية تمت إضافتها حديثًا ومُقدرًا. بالطبع ، بشكل عام ، يمكنك استخدام طرق عرض جزئية هنا ، وقد يكون هناك edit.cshtml في مشروعك ، ولكن هنا يضع المدون هذه على صفحة واحدة لأن هذا ليس هو محور النص.
<div id = "mymodal" tabIndex = "-1" "dial =" dialog "aria-labelledby =" mymodallabel "> <div rol are =" div> <viv> <dunty type = "button" data-dismiss = "modal" aria-label = "close id = "mymodallabel"> العملية </h4> </viv> <viv> <label for = "txt_departmentname"> اسم القسم </label> <إدخال type = "text" name = "txt_departmentname" data-bind = "value: name" id = "txt_departmentname" لـ = "txt_departmentlevel"> مستوى القسم </label> <إدخال type = "text" name = "txt_departmentlevel" data-bind = "value: level" id = "txt_departmentlevel data-bind = "value: des" id = "txt_des" placeholder = "description"> </div> </viv> <viv> <button type = "button" data-dismiss = "modal"> <span aria-hidden = "true"> </span> close </button> <button type = "id =" btn_submit " aria-hidden = "true"> </span> حفظ </button> </viv> </viv> </viv>
2.2. تشغيل زر تهيئة JS
// operation var operation = {// تهيئة زر الحدث progeatinit: function () {this.operateadd () ؛ this.operateupdate () ؛ this.operatedelete () ؛ this.departmentModel = {id: ko.observable () ، name: ko.Observable () ، ko.observable () ko.Observable ()} ؛} ، // add OperationAdd: function () {$ ('#btn_add'). on ("click" ، function () {$ ("#mymodal"). modal (). on ("dister.bs.modal" ، function () ko.observable () ، المستوى: ko.observable () ، des: ko.observable () ، createTime: ko.observable () document.getElementById ("mymodal"))) ؛ proegate.operatesave () ؛}). on ('hidden.bs.modal' ، function () {ko.cleannode (document.getElementById ("mymodal") ؛}) ؛}) ؛}) ؛}) ؛ {$ ('#btn_edit'). on ("click" ، function () {$ ("#mymodal"). modal (). on ("dister.bs.modal" ، function () إلى ViewModelko.Utils.Extend (proegate.departmentModel ، ko.mapping.fromjs (arrregregreregedData [0])) ؛ ko.applybindings (proave.departmentModel ، document.getElementByid ("mymodal") {// قم بمسح الربط عند إغلاق المربع المنبثق (يتضمن هذا واضحًا مسح الربط وتطهير حدث التسجيل) ko.cleannode (document.getElementById ("mymodal")) ؛}) ؛}) ؛}) ؛}) ؛} ، arrrecedData = tableInit.myViewModel.getSelections () ؛ $. ajax ({url: "/department/delete" ، type: "post" ، contentType: 'application/json' ، data: {Alert (status) ؛ // tableinit.myviewmodel.refresh () ؛}}) ؛}) ؛}) ؛} ، إلى data modelvar odatamodel = ko.tojs (oviewModel) ؛ var funcname = odatamodel.id؟"update":monddid ؛ {Alert (status) ؛ tableInit.myViewModel.Refresh () ؛}}) ؛}) ؛}) ؛} ، خطأ ؛} إرجاع صحيح ؛}}الشكوك المدونة: أخبرنا عن منطق التنفيذ هنا. أولاً ، call compator.operateInit () ؛ في طريقة $ (function () {}). في طريقة المشغل () ، قم بتسجيل حدث النقر على الزر الموجود في الصفحة ، وأيضًا تحديد هذا. يحدد ViewModel سمات المراقبة المقابلة لعناصر الصفحة. هل ما زلت تتذكر بعض عربات البيانات في المربع المنبثق المخبأة أعلاه؟ نعم ، قيمة القيمة المقابلة فيها تتوافق مع سمات المراقبة هنا. بعد تعيين الربط ، ستؤدي جميع التغييرات المراقبة في JS التي تؤدي إلى هذا. على العكس من ذلك ، فإن التغيير في قيمة قيمة جميع العلامات على الواجهة سيؤدي حتماً إلى التغيير في قيم سمة المراقبة الخاصة به. هذا هو ما يسمى بالربط في اتجاهين. دعنا نلقي نظرة على تنفيذ الربط ثنائي الاتجاه بالتفصيل.
2.3. عمليات جديدة
$ ('#btn_add'). on ("click" ، function () {$ ("#mymodal"). modal (). on ("dister.bs.modal" ، function () {var oemptymodel = {id: ko.observ () ، name: ko.observible () ، level: ko.observable () ، deservable (). ko.observable () ، createTime: ko.observable ()} ؛ ko.utils.extend (progeate.departmentModel ، oemptymodel) ؛ ko.applybindings (proazing.departmentmodel ، document.getElementByid ("mymodal")) ؛ operate. () {ko.cleannode (document.getElementById ("mymodal")) ؛}) ؛}) ؛عندما تثير الواجهة الخاصة بنا عملية جديدة ، فإن مربع المشرف المخفي المذكور أعلاه سوف يظهر أولاً. عندما يتم عرض المربع المشروط ، قم أولاً بتحديد عرض ViewModel فارغ ، ثم اتصل بـ Ko.Utils.Extend (Proate.DepartmentModel ، OemptyModel) ؛ ستعمل هذه الجملة على الكتابة فوق التشغيل العالمي. تشبه وظيفة طريقة ko.utils.extend () وظيفة $ .extend () في jQuery. يتم دمج كلا الكائنين السابقة بناءً على الكائنات اللاحقة ، وبعد الاندماج ، يتم تنشيط الربط باستخدام ViewModel الجديد. بعد تنشيط الربط ، قم بتسجيل حدث النقر فوق الزر "حفظ". عند إضافة هذا ، يبرز مربع مشروط. نظرًا لأن سمات المراقبة في ViewModel كلها فارغة ، سيتم أيضًا مسح قيمة عنصر الواجهة المقابلة ، لذلك نرى ذلك في الإضافة الجديدة:
عند إغلاق المربع المنبثق ، نقوم بتنفيذ ko.cleannode (document.getElementById ("mymodal")) ؛ من خلال الحدث المغلق. هذه الجملة مهمة للغاية لأنه بالنسبة لنفس DOM ، لا يمكن ربط KO إلا مرة واحدة. إذا كنت بحاجة إلى الربط مرة أخرى ، فأنت بحاجة إلى مسح الربط أولاً. بالإضافة إلى ذلك ، لن تقوم طريقة CleanNode () بمسح الربط فحسب ، بل تقوم أيضًا بمسح الأحداث المسجلة في DOM. تحتاج إلى الانتباه عند استخدامه!
2.4. عمليات التحرير
$ ('#btn_edit'). on ("click" ، function () {$ ("#mymodal"). modal (). on ("shown.bs.modal" ، function () {var arrrecteddata = tableInit.MyViewModel.getSelcep نموذج إلى ViewModelko.Utils.Extend (bearate.departmentModel ، ko.mapping.fromjs (arrrectedData [0])) ؛ ko.applybindings (progeate.departmentModel ، document.getElementByid ("mymodal") {// قم بمسح الربط عند إغلاق المربع المنبثق (يتضمن هذا واضحًا مسح الربط ومسح حدث التسجيل) ko.cleannode (document.getElementById ("mymodal")) ؛}) ؛}) ؛ ؛؛عندما نؤدي إلى تشغيل عملية التحرير ، لا تزال الواجهة تنبثق. في الحدث المنبثق من المربع المنبثق ، نأخذ الصف المحدد حاليًا ثم نتحقق مما إذا كان يتم تحديد صف. من الأفضل تحويل كائنات JSON العادية إلى ViewModel مع سمات المراقبة من خلال الجملة ko.mapping.fromjs (ArrrectedData [0]). كما هو مذكور في المقالة السابقة ، تتطلب هذه الطريقة دعم ملف js knockout.mapping-latest.js. بعد التحويل ، لا يزال يتم تحديث ViewModel من خلال طريقة ko.utils.extend () ثم تنشيط الربط. نظرًا لأن ViewModel يتم تحديثه بواسطة بيانات الصف المحدد حاليًا ، فإن النتيجة هي:
2.5. حفظ العملية
بعد إضافة وتحرير مربعات المنبثقة ، انقر فوق حفظ بعد تعديل المعلومات ذات الصلة ، وسيتم تشغيل حدث حفظ.
$ ('#btn_submit'). on ("click" ، function () {// إحضار viewmodelvar oviewmodel = prograte.departmentModel ؛ // تحويل viewmodel إلى نموذج البيانات Odatamodel = ko.tojs (oviewmodel) ؛ var funcname = Odatamodel.id؟"update": Risedd" ؛ $. ajax( {url: "/department/"+funcname ، type: "post" ، data: odatamodel ، success: function (data ، status) {alert (status) ؛عندما يتم تشغيل حدث حفظ ، نرتب أولاً من ViewModel إلى الصفحة ، أي التشغيل. هذه الطريقة مدمجة في KO ولا تتطلب دعم JS آخر. بعد الحصول على كائن JSON ، أرسل طلب AJAX لإضافة أو تحرير البيانات. هذا يعكس بئر في اتجاهين جيدا. بعد تغيير قيمة جميع مربعات النص على الواجهة ، سيتم أيضًا تشغيل تغيير التشغيل.
2.6. حذف العملية
لا يوجد ما يقوله عن عملية الحذف وليس له علاقة بـ KO.
3. ملخص
يقدم ما ورد أعلاه الاستخدام المشترك لـ KO و Bootstraptable من خلال إضافة بسيطة وحذف وتعديل وعملية بحث. يمكن لـ KO تحريرك من DOM والتركيز على ViewModel. بالنظر إلى رمز JS بأكمله ، لا يمكنك رؤية JQuery's Val () و Text () والعمليات الأخرى للحصول على القيم وتعيينها إلى DOM. هل تبدو نظيفة ومنعشة ، ومتطورة؟ بالطبع ، قد يكون هذا مجرد بعض الاستخدامات الأساسية لـ KO. بعد كل شيء ، لم يتعلم المدونون سوى KO لمدة 3 أيام ، ويجب استكشاف استخدامات أكثر تقدمًا. عندما تعتاد عليها منذ فترة ، ستشارك بعضًا من استخداماتها المتقدمة مع الجميع. إذا كنت تعتقد أن هذه المقالة يمكن أن تساعدك على فهم مبدأ KO واستخدامها ، فقد توصي به كذلك. المحرر ممتن له هنا!
ما سبق هو المحتوى الكامل لمجموعة من bootstraptable و rastgrowaTJs لتنفيذ وظيفة الإضافة والحذف والتعديل والبحث [2]. آمل أن يكون ذلك مفيدًا للجميع!