Bootstrap هو إطار عمل أمامي ، وهو أمر جيد لتحرير مطوري الويب. إنه يوضح أن واجهة المستخدم هي متطورة للغاية ، في الغلاف الجوي والراقية. من الناحية النظرية ، لا تحتاج إلى كتابة خط من CSS. فقط أضف السمات المناسبة إلى العلامة.
Knockoutjs هو إطار MVVM من جافا سكريبت. جيد جدًا. على سبيل المثال ، بعد إضافة أو تقليل عناصر بيانات القائمة ، ليست هناك حاجة لتحديث جزء التحكم بأكمله أو كتابة عقد الإضافة وحذف JS بنفسك. فقط حدد القالب والسمات التي تلبي تعريفات بناء الجملة. ببساطة ، نحتاج فقط إلى الانتباه إلى الوصول إلى البيانات.
1. مقدمة إلى knockout.js
1. knockout.js و mvvm
في الوقت الحاضر ، فإن أطر عمل مختلفة في الواجهة الأمامية هي ساحقة ومبهرة. في بعض الأحيان ، يجب أن أتنهد ذلك بصفتي مبرمجًا صعبًا حقًا ، فهناك دائمًا تقنيات لا حصر لها للتعلم. متى ستنتهي ، ما لم تتحول! بحر المعاناة لا حدود له ، وما إذا كان الشاطئ عندما تنظر إلى الوراء متروك لك!
Knockout.js هو إطار عمل أمامي خفيف الوزن يعتمد على وضع MVVM. ما مدى ضوء ذلك؟ وفقًا لأحدث الإصدار V3.4.0 المعروض على الموقع الرسمي ، فهو 22 كيلو بايت فقط. يمكنه التعامل مع الربط بين نموذج البيانات ودوار الواجهة بطريقة ودية. أهم شيء هو أن ربطه ثنائي الاتجاه. وهذا يعني ، في حالة تغير نموذج البيانات ، ستتغير البيانات الواردة في الواجهة DOM وفقًا لذلك. على العكس ، إذا تغيرت البيانات الموجودة في الواجهة DOM ، فسيتغير نموذج البيانات أيضًا وفقًا لذلك. هذا يمكن أن يقلل بشكل كبير من كمية الكود الأمامي الخاص بنا ويجعل الواجهة الخاصة بنا سهلة الحفاظ عليها ، ولم نعد يتعين علينا كتابة الكثير من نماذج بيانات مراقبة الأحداث وتغييرات DOM للواجهة. سيوضح المدون هاتين النقطتين بناءً على مثال الاستخدام أدناه.
موقع Knockout.js الرسمي: http://knockoutjs.com
knockout.js عنوان المصدر المفتوح: https://github.com/knockout/knockout
وضع MVVM: هذا نموذج تصميم لإنشاء واجهات المستخدم. يقوم MVVM بتقسيمها إلى ثلاث قطع ، وهي النموذج ، والعرض ، و ViewModel ، النموذج هو نموذج البيانات ، والعرض هو عرضنا ، و ViewModel هو نموذج عرض ، يستخدم لربط نموذج البيانات وعناصر DOM في العرض. إذا كنت قد استخدمت WPF و Silverlight ، فإن فهم هذا لا ينبغي أن يكون مشكلة ؛ إنها ليست مشكلة لعدم استخدامها. بعد قراءة هذا المقال ، سيكون لديك فهم عام.
2. أبسط مثال
بشكل عام ، إذا كنت تستخدم knockout.js من الصفر ، فأنت بحاجة إلى القيام بالأجزاء الأربعة التالية على الأقل
2.1. انتقل إلى الموقع الرسمي لتنزيل ملف straint.js ، ثم اقتبسه إلى صفحة العرض.
<script src = "~/scripts/knockout/jackout-33.4.0.min.js"> </script>
ملاحظة: لا يتطلب jackout.js دعم jQuery. إذا كان مشروعك يتطلب عمليات متعلقة بـ jQuery ، راجع jQuery ؛ خلاف ذلك ، الرجوع فقط إلى الملفات أعلاه.
2.2. تعريف ViewModel
ما هو ViewModel؟ في الواقع ، في JS ، يبدو وكأنه كائن JSON. نحدد عرض ViewModel:
var myViewModel = {name: "lilei" ، المهنة: "Engineer Software" ،} ؛2.3. حدد العلامة التي تربط بين عمود البيانات في طريقة العرض
<div> الاسم: <label data-bind = "text: name"> </balled> <br /> المهنة: <إدخال type = "text" data-bind = "textInput: charce" /> </viv>
ملاحظة: مطلوب TextInput للنص المقابل لعلامات الإدخال ، بينما يلزم نص نص للعلامات العادية.
2.4. تنشيط الربط
بعد القيام بالخطوات الثلاث المذكورة أعلاه ، تحتاج أيضًا إلى تنشيط ارتباط خروج المغلوب
Ko.ApplyBindings (MyViewModel) ؛
من خلال القيام بهذه الأجزاء الأربعة ، يتم تنفيذ أبسط ربط بيانات ViewModel بشكل أساسي. احصل على التأثير:
إذا كنت حريصًا بما فيه الكفاية ، فستجد أن طريقة ko.applybindings () لها معلمتان. الأول هو ViewModel الذي نحتاج إلى ربطه ، وما هو الثاني؟ من ko.applybindings (myViewModel) ؛ يمكننا أن نرى أن المعلمة الثانية هي معلمة اختيارية ، والتي تمثل نطاق العلامة المرتبطة بـ ViewModel. على سبيل المثال ، دعنا نغير الكود أعلاه:
<div> الاسم: <label id = "lb_name" data-bind = "text: name"> </billy> <br /> المهنة: <input type = "text" data-bind = "textInput: charce" /> </fiv> ko.applybindings (myViewModel ، document.getElementByid ("lb_name")) ؛احصل على النتيجة:
من هذا ، يمكننا أن نرى أن المعلمة الثانية تحدد نطاق عمل MyViewModel ، أي أن الربط فقط على ملصق ID = "LB_NAME" سيصبح ساري المفعول. إذا كانت المعلمة الثانية عبارة عن ملصق حاوية مثل Div ، فهذا يعني أن نطاق الربط هو كل اللوحات الفرعية تحت DIV.
3. سمات المراقبة
اعتبارًا من الخطوات الأربع المذكورة أعلاه ، لا يمكننا رؤية أي تأثير. ما نراه ليس أكثر من ربط بيانات كائن JSON بعلامة HTML. ما الهدف من القيام بذلك؟ أليس هذا يعقد مشاكل بسيطة؟ لا تقلق ، شاهد المعجزة على الفور! كما ذكر أعلاه ، فإن أهم أهمية للضربة القاضية تكمن في الربط ثنائي الاتجاه. إذن كيف نحقق ملزمة في اتجاهين؟ الجواب هو مراقبة السمات.
في خروج المغلوب ، هناك ثلاث سمات مراقبة في النواة: Observables ، AssionObservables ، Observablearray. يتم ترجمة معنى الملاحظة على أنها الملاحظة والمراقبة. إذا كان من غير المناسب القول أنها سمة مراقبة أو سمة مراقبة ، فسنطلق عليها سمة مراقبة في الوقت الحالي.
3.1. الملاحظات: مراقبة خصائص
دعونا نغير المثال أعلاه لهذا:
<Head> <meta name = "viewport" content = "width = width device"/> <title> index3 </title> <script src = "~/scripts/jQuery -1.9.1.js data-bind = "text: name"> </billy> <br/> المهنة: <إدخال type = "text" data-bind = "textInput: profession"/> </viv> <viv> <input type = "text" id = "txt_testobservable"/> </viv> <script type/javascript Ko.Observable ("Lilei") ، المهنة: "مهندس البرمجيات" ،} ؛ // 2. قم بتنشيط ko.applyBindings (myViewModel) ؛ $ (function () {// registrice textchange event $ ("#txt_testobservable"). على ("الإدخال" ، الدالة () {myViewModel.Name ($ (this) .val ()) ؛}) ؛معنى هذه الجملة هو إضافة خاصية اسم ViewModel إلى خاصية مراقبة. يجب أن تصبح خاصية الاسم خاصية مراقبة. سيحدث شيء سحري. دعونا نلقي نظرة على عندما نكتب myViewModel.:
لقد تغير الاسم من الخاصية الأصلية إلى طريقة ما ، أي بمجرد إضافة ko.observable () ، ستصبح الخاصية المقابلة طريقة. لذلك ، يجب التعامل مع قيمة وتعيين الاسم باستخدام myViewModel.name (). لنلقي نظرة على التأثير:
الشك في الكود: من الواضح أن myViewModel.name ($ (this) .val ()) ؛ تقوم هذه الجملة بتعيين قيمة مربع النص الحالي لخاصية الاسم. نظرًا لأن الواجهة تربط خاصية الاسم ، فإن القيمة في الملصق تتغير أيضًا وفقًا لذلك. أو قد تقول أنه يمكن القيام بذلك باستخدام حدث TextChange. طالما تم تعيين قيمة مربع النص الحالي لعلامة التسمية ، يمكن تحقيق هذا التأثير ، وهو لا شيء. في الواقع ، يمكن أن تحقق طريقة الكتابة الخاصة بك الغرض أيضًا ، ولكن أهمية سمة المراقبة الخاصة بنا هي أنه عندما يتم تغيير قيمة الاسم في أي مكان ، ستتغير الواجهة وفقًا لذلك ، دون تعيين قيم لعلامات التسمية في كل مكان. في JS ، تحتاج فقط إلى التركيز على myViewModel.name (). أليس هذا رائع جدا ~~
3.2. reledentobservables: مراقبة خصائص التبعية
إذا كنت قد قرأت سمات المراقبة أعلاه ، فأنت غير راضٍ بعد؟ دعنا نلقي نظرة على استخدام سمات مراقبة التبعية.
دعونا نغير الرمز ونلقي نظرة:
<Head> <meta name = "viewport" content = "width = width device"/> <title> index3 </itlem> <script src = "~/scripts/jquery -1.9.1.min.js"> </script> <script src = "~/jrownout/jroknout- type = "text" data-bind = "textInput: name" /> <br /> المهنة: <إدخال type = "text" data-bind = "textInput: profession" /> <br /> /> الوصف: <label data-bind = "text: des" </sable> </viv> <script type /javascript "> Ko.Observable ("Lilei") ، المهنة: ko.observable ("مهندس البرمجيات") ،} ؛ myViewModel.des = ko.dependentObservable (function () {return "i named - قم بتنشيط ko.applybindings (myViewModel) ؛ </script> </body>لنلقي نظرة على التأثير:
الشك في الرمز: من خلال إضافة سمة التبعية المراقبة KO.DependentObservable () ، يمكن مراقبة قيمة سمة DES في نفس الوقت للتغييرات في الاسم والأستاذ. إذا تغير أي منها ، فإن العلامة des-rond ستؤدي إلى التغيير. أكبر ميزة في ذلك هي تجنب مشكلة تشغيل DOM بواسطة JS ، وهو أمر مثير للاهتمام.
3.3. Observablearray ؛ مراقبة المصفوفات
بالإضافة إلى الاثنين أعلاه ، يدعم KO أيضًا مراقبة كائنات الصفيف. لنلقي نظرة على مثال:
<head> <meta name = "viewport" content = "width = width device"/> <title> index3 </title> <script src = "~/scripts/jquery -1.9.1.min.js"> </script> <script src = "~/knocpts/jroknout- data-bind = "Options: Deptarr ، OptionStext:" name ""> </select> </viv> <viv> <input type = "text" id = "txt_testobservable"/> <input type = "button" id = "btn_test" value = "new Department"/> </div type = "text/javidger" 1 ، الاسم: 'R & D Department'} ، {id: 2 ، الاسم: 'القسم الإداري'} ، {id: 3 ، الاسم: 'قسم الشؤون البشرية'}]) ؛ var viewmodel = {deptarr: deptarr ،} ؛ ko.applybindings (viewModel) ؛ var i = 4 ؛ $ (function () {$ ( {deptarr.push ({id: i ++ ، الاسم: $ ("#txt_testobservable"). val ()}) ؛}) ؛}) ؛ </script> </body>تحقق من التأثير:
الشك في الرمز: الطريقة أعلاه ko.observablearray () تضيف مراقبة كائنات الصفيف. وهذا يعني ، في أي مكان في JS ، طالما تم إجراء تغييرات الصفيف على كائن مجموعة Deptarr ، سيتم تشغيل واجهة المستخدم لإعطاء واحدة المقابلة. أحد الأشياء التي يجب ملاحظة أن صفيف المراقبة هو في الواقع كائن الصفيف المراقب نفسه ، ولا يمكن مراقبته للتغييرات في خصائص كائن الطفل في كائن الصفيف. على سبيل المثال ، نقوم بتغيير حدث النقر إلى هذا:
$ (function () {$ ("#btn_test"). on ("click" ، function () {deptarr [1] .name = "aaa" ؛}) ؛}) ؛تأثير:
هذا يدل على أن مراقبة الصفيف تراقب فعليًا كائن الصفيف نفسه ، ولن يراقب التغييرات في سمات العناصر في الصفيف. إذا كنت بحاجة حقًا إلى مراقبة تغييرات خاصية الكائنات في البيانات ، فأنت بحاجة إلى استخدام ko.observable () لخاصية الكائنات في البيانات ، ويتم استخدام الاثنين معًا. إذا كنت مهتمًا ، فيمكنك تجربته.
4. سمات عربات البيانات الشائعة في KO
في ما سبق ، استخدمنا سمات متعددة لبيانات البيانات ، لذا كم عدد سمات عربات البيانات هذه الموجودة في خروج المغلوب؟ هنا ندرج بعض الخصائص شائعة الاستخدام.
4.1. النص و inputText
النص ، كما يوحي الاسم ، يعني النص. يتم استخدام سمة الربط هذه عمومًا لعرض النص مع علامات مثل <bly> ، <span> ، <viv> ، إلخ. بالطبع ، إذا كنت تريد ، يمكن استخدام هذا الربط لأي علامة. لا شيء في الأساس ليقول عن استخدامه. إذا لم يتم استخدام ko.Observable () ، فهو ملزم ثابت ، وإلا فإنه هو ارتباط ديناميكي.
InputText ، نص علامة الإدخال ، يعادل سمة القيمة لعلامة الإدخال.
<div> الاسم: <label data-bind = "text: name"> </billy> <br/> المهنة: <input type = "text" data-bind = "textInput: charce"/> </viv> //1.define viewmodelvar myviewmodel = {name: ko.observable ("lilei") ، "eveneer:} ؛ // 2. تنشيط ko.applybindings الربط (myViewModel) ؛4.2. قيمة
تُستخدم هذه الخاصية الربط بشكل عام لعلامات الإدخال ، والتي تشبه بشكل أساسي inputText أعلاه. لكن القيمة أكثر موحدة.
يستخدم أيضًا مع القيمة هو ValueUpdate المعلمة ، مما يشير إلى العملية التي تقوم بها الواجهة عند تحديث القيمة. تتضمن القيم الرئيسية لـ ValueUpdate التغيير/keyup/keypress/afterkeydown ، وما إلى ذلك. يشير إلى قيمة ViewModel المقابلة للقيمة عندما تتغير النص ، تقلص لوحة المفاتيح ، الضغط على لوحة المفاتيح ، الضغط على لوحة المفاتيح ، الضغط على لوحة المفاتيح ، إلخ ، إلخ.
الاسم: <إدخال type = "text" data-bind = "value: name ، valueupdate: 'keyup'" /> <br /> var myViewModel = {name: ko.observable ("lilei") ،} ؛ // 2. تنشيط ko.applybindings الربط (myViewModel) ؛يشير الرمز أعلاه إلى أن سمة القيمة لمربع النص وسمة الاسم الخاصة بـ MyViewModel يتم تحديثها عند إغلاق لوحة المفاتيح.
4.3. فحص
يتم استخدام الربط المحدد عمومًا في مربع الاختيار ، والراديو وعناصر النماذج الأخرى التي يمكن تحديدها ، وقيمتها المقابلة هي نوع منطقي. إن استخدام القيمة مشابه بشكل أساسي ، لذلك لن أكرره.
4.4. يُمكَِن
يتم استخدام التمكين بشكل عام لتمكين عناصر الملصقات ، ويستخدم بشكل عام لتمكين عناصر النماذج وتعطيلها. على عكس المعوقين ، فإن القيمة المقابلة هي أيضًا نوع منطقي.
<div> <input type = "text" data-bind = "enable: ismen"/> </viv> <script type = "text/javaScript"> // Ko.Observable (40) ، Ismen: Ko.Observable (True)} ؛ // 2. قم بتنشيط ko.applybindings (myViewModel) ؛ myViewModel.ismen (false) ؛ </script>
منذ أن أصبحت خاصية Ismen خاطئة ، ستعرض جميع مربعات النص المقابلة حالة معطلة.
4.5. عاجز
على عكس التمكين ، فإن الاستخدام مشابه لتمكين.
4.6. خيارات
في ما ورد أعلاه ، تم استخدام الخيارات عند استخدام تحديد الربط ، والذي يمثل مجموعة خيارات علامة تحديد ، والقيمة المقابلة هي صفيف ، تمثل مصدر بيانات هذا المربع المنسدلة. يمكن تمكين مراقبة مصدر البيانات هذا باستخدام ObservableArray. انظر أعلاه للاستخدام.
4.7.html
ربط النص هو في الواقع إعداد وقيمة النص الداخلي. وبالمثل ، فإن ربط HTML هو أيضًا إعداد وقيمة innerhtml. القيمة المقابلة لها هي علامة HTML.
4.8. CSS
ربط CSS هو إضافة أو إزالة نمط واحد أو أكثر (الفئات) إلى عنصر DOM. استخدام التنسيق:
<type type = "text/css">. testbold {background-color: powderblue ؛} </style> <div data-bind = "css: {testbold: myViewModel.name () == 'lilei'}"> aaa </div> var myViewModel = {ko.obserable ("lilei) مهندس ") ، العمر: ko.observable (40)} ؛سيعرض هذا DIV لون الخلفية.
إذا كنت بحاجة إلى إضافة أو إزالة أنماط متعددة ، فما عليك سوى تغييرها قليلاً ، على سبيل المثال:
<div data-bind = "css: {testbold: myViewModel.name () == 'lilei' ، testborder: myViewModel.profession () == 'php exhiner'}"> aaaa </viv>4.9. أسلوب
إذا كانت وظيفة ربط CSS هي إضافة أو إزالة أنماط الفئة ديناميكيًا إلى العلامة ، فإن وظيفة ربط النمط هي إضافة أو إزالة نمط معين إلى العلامة. على سبيل المثال:
<div data-bind = "css: {background-color: myViewModel.name () == 'Lilei'؟ 'Red': 'White'}"> aaaa </viv>إذا قمت بإضافة أو إزالة مضاعفات ، وكيفية استخدام ربط CSS
4.10 ، attr
يتم استخدام ربط ATTR بشكل أساسي لإضافة وإزالة سمة واحدة أو أكثر (بما في ذلك السمات المخصصة) إلى العلامة ، وتشبه CSS.
4.11. انقر
انقر فوق الربط يعني إضافة طريقة تنفيذ الحدث إلى عنصر DOM المقابل. يمكن استخدامها على أي عنصر.
<div> <input type = "button" value = "test انقر فوق ربط" data-bind = "click: clickfunc" /> < /div> var myViewModel = {clickfunc: function () {alert ($ (event.currentTarget) .val ()) ؛Event.CurrentTarget يمثل عنصر DOM الذي تم النقر عليه حاليًا. في بعض الأحيان من أجل البساطة ، نستخدم وظائف مجهولة للربط مباشرة ، مثل:
<div> <input type = "button" value = "test انقر فوق الربط
ومع ذلك ، فإن طريقة كتابة JS إلى HTML تجعل من الصعب على المدونين قبولها ، ويشعرون أنه من غير المريح نسبيًا الحفاظ عليها ، خاصةً عندما يكون المنطق في حدث النقر معقدًا بعض الشيء. لذلك ، إذا لم يكن ذلك ضروريًا ، فلا يوصى بكتابة هذه الوظيفة المجهولة مباشرة.
4.12. آحرون
بالنسبة لجميع روابط Bind-bind ، يمكنك رؤية المقدمة على الموقع الرسمي ، ولن أدرجها واحدًا تلو الآخر هنا. عندما تحتاجه ، ما عليك سوى الانتقال إلى الموقع الرسمي للتحقق من ذلك. ألقِ نظرة على جميع الروابط المدرجة على الموقع الرسمي:
5. التحول والعلاقة بين كائنات JSON وسمات المراقبة
نحن نعلم أنه من أجل تجنب طرق العرض المباشر بلغات مختلفة ، بشكل عام ، نستخدم بيانات تنسيق JSON عند التفاعل مع الواجهة الأمامية والخلفية. نستخدم نموذج البيانات الذي تم استرداده من الواجهة الخلفية من خلال طلبات HTTP. لاستخدام بعض ميزات KO الخاصة بنا ، يجب علينا تحويل نماذج البيانات العادية هذه إلى سمات مراقبة KO ؛ على العكس من ذلك ، نستخدم سمات مراقبة KO ، وأحيانًا نحتاج إلى تحويل هذه السمات إلى بيانات JSON العادية ونقلها إلى الخلفية. فكيف تحقيق هذا التحويل؟
5.1. تحويل كائن JSON إلى ViewModel
على سبيل المثال ، نأخذ كائن JSON من الخلفية ، ثم نقوله إلى ViewModel الخاص بنا ، ثم نربطه بـ DOM.
$ .ajax ({url: "/home/getData" ، النوع: "get" ، البيانات: {} ، النجاح: الدالة (البيانات ، الحالة) {var ojson = data ؛}}) ؛نرسل طلبًا إلى الواجهة الخلفية ، ونأخذ كائن JSON ، وتعيين قيمة إلى Ojson ، ثم نقوم بتحويل Ojson إلى ViewModel. الطريقة الأكثر سهولة هي تحويلها يدويًا. على سبيل المثال ، يمكننا القيام بذلك:
var myviewmodeljson = {deptname: ko.observable () ، deptlevel: ko.observable () ، deptdesc: ko.observable ()} ؛ ko.applybindings (myviewmodeljson) ؛ثم في النجاح الذي طلبه أياكس
النجاح: الدالة (البيانات ، الحالة) {var ojson = data ؛ myViewModeljson.deptname (ojson.deptname) ؛ myviewmodeljson.deptlevel (ojson.detplevel) ؛ myviewmodeljson.deptdesc (ojson.deptdesc) ؛}وبهذه الطريقة ، من خلال الربط اليدوي ، يتم تحقيق ربط كائن JSON إلى ViewModel. إن ميزة القيام بذلك هي المرونة ، والعيوب واضحة ، وكمية الكود اليدوي كبير جدًا.
لحسن الحظ ، مع المصدر المفتوح العالمي لدينا ، هناك دائمًا أشخاص يتوصلون إلى طريقة أفضل. يمكننا استخدام مكون rasting.mapping لمساعدتنا في تحويل كائن JSON الواجهة إلى ViewModel.
خروج المغلوب.
دعنا نلقي نظرة موجزة على كيفية استخدامها ، أو المثال أعلاه. لا نحتاج إلى تنفيذ تعريف أي طريقة عرض. أولاً ، نحتاج إلى الرجوع إلى straint.mapping.js
<script src = "~/scripts/knockout/jackout-33.4
ملاحظة: يجب وضع knock.mapping-solastest.js خلف Knockout-3.4.0.min.js ، وإلا لا يمكن استدعاء Ko.mapping.
ثم استخدمه مباشرة في وظيفة النجاح
النجاح: الدالة (البيانات ، الحالة) {var myViewModelJson2 = ko.mapping.fromjs (data) ؛ ko.applybindings (myViewModelJson2) ؛}دعونا نرى التأثير:
الشك في الرمز: يتم تحويل كائن JSON الذي تم استرداده من الخلفية من خلال طلب AJAX بسهولة إلى ViewModel من خلال ko.mapping.fromjs (). أليست حادة؟ بالطبع ، بالإضافة إلى هذا الاستخدام ، يمكنك أيضًا تحديث ViewModel الحالي ، واستخدامه على النحو التالي:
var myviewmodeljson = {deptname: ko.observable () ، deptlevel: ko.observable () ، deptdesc: ko.observable ()} ؛ ko.applybindings (myViewModeljson) ؛ $ (function () {} ، النجاح: الدالة (البيانات ، الحالة) {ko.mapping.fromjs (البيانات ، myViewModeljson)}}) ؛}) ؛في النجاح ، قم بتحديث ViewModel of MyViewModelJson وفقًا لقيمة البيانات.
5.2. تحويل ViewModel إلى كائن JSON
ذكر أعلاه أن كائنات JSON يتم تحويلها إلى ViewModel ، فماذا يجب أن نفعل إذا احتجنا إلى تحويل ViewModel إلى كائنات JSON ونقلها إلى الواجهة الخلفية؟
هناك طريقتان متوفرتان في خروج المغلوب:
• KO.TOJS (): تحويل ViewModel إلى JSON Object
• Ko.Tojson (): تحويل ViewModel إلى سلسلة JSON المسلسل.
على سبيل المثال ، رمزنا كما يلي:
$ (function () {var ojson1 = ko.tojs (myViewModeljson) ؛ var ojson2 = ko.tojson (myViewModeljson) ؛}) ؛ var myviewmson = {deptname: ko.observable ("r & deperty") ، deptlevel: ko.bservable (2 "). Ko.Observable ("Development Group")} ؛ Ko.ApplyBindings (MyViewModeljson) ؛ثم دعونا نراقب قيم OJSON1 و OJSON2:
الشك في الكود: من خلال الصورة أعلاه ، من السهل فهم الفرق بين الطريقتين. تجدر الإشارة هنا إلى أن هاتين الطريقتين مدمجان في KO ولا تتطلب دعم مكون التعيين.
6. قم بإنشاء سمة عينة البيانات الخاصة بك
لقد تحدثت عن الكثير أعلاه ، وسأقدم بعض الربط والمراقبة في خروج المغلوب. لذلك ، في بعض الأحيان ، نحتاج إلى تخصيص عملة البيانات الخاصة بنا ، مثل: <label data-bind = "myBind: name"> </billy>. هذا المطلب مفيد بشكل خاص عند تغليف المكونات. هل يمكن تنفيذه؟ بالتأكيد.
في خروج المغلوب ، يتم توفير خاصية KO.BindingHandlers لتخصيص خاصية Bind. بناء الجملة الخاص به هو كما يلي:
Ko.BindingHandlers.MySelect = {init: function (element ، valueaccessor ، allbindingsaccessor ، viewModel) {} ، update: function (element ، valueaccessor ، allBindingSaccessor ، viewModel) {}} ؛ما عليك سوى الإعلان عن هذا الأمر ، وبعد ذلك يمكنك استخدام ملف بيانات مخصص في علامة HTML الخاصة بنا.
<div> <حدد data-bind = "mereSelect: $ root"> <Option ID = "1"> قسم R & D </OPTION> <OPTION ID = "2"
MySelect هو خاصية الربط المخصصة لدينا. يمكن فهم جذر $ على أنه تهيئة في الوقت الحالي (على الرغم من أن هذا التفسير ليس صارمًا ، إذا كان هناك تفسير أكثر منطقية ، فلا تتردد في تصحيحه).
الشك في الرمز: يمكن استخدام KO.BindingHandlers أعلاه لتنفيذ خصائص الربط المخصصة. يجب شرح نقطتين:
• init ، كما يوحي الاسم ، يهيئة الربط المخصص. أنه يحتوي على معلمات متعددة. يتم استخدام المعلمتين الأولين بشكل عام في كثير من الأحيان. تمثل المعلمة الأولى عنصر DOM الذي يهيئة الربط المخصص ، ويستخدم المعلمة الثانية عمومًا لتمرير المعلمات المهيئة.
• تحديث ، تحديث رد الاتصال ، عندما تتغير سمة المراقبة المقابلة ، سيتم إدخال هذه الطريقة. إذا لم يكن رد الاتصال مطلوبًا ، يمكن أن تكون هذه الطريقة غير معلمة.
هنا ، سوف يشرح المدون بإيجاز استخدام الروابط المخصصة استنادًا إلى مكون مربع منسد إلى مكون Mutiselect الذي شاركه.
6.1. أبسط utieselect
بشكل عام ، إذا كنا بحاجة إلى استخدام KO لتغليف بعض المكونات العامة ، فنحن بحاجة إلى استخدام ko.bindinghandlers لدينا. سيناقش المدون كيفية استخدامه بالاشتراك مع مكون mutiselect.
أولاً ، أعلن عن KO.BindingHandlers المخصصة ، وتهيئة علامة SELECT الخاصة بنا في طريقة init
ko.bindingHandlers.MySelect = {init: function (element ، valueaccessor ، allbindingsaccessor ، viewmodel) {$ (element) .Multiselect () ؛ثم استخدمه في علامة الصفحة
<div style = "text-align: Center ؛
الجزء الثالث ، قم بتفعيل الربط
$ (function () {var multiselect = {} ؛ ko.applyBindings (multiselect) ؛}) ؛إذا لم تكن بحاجة إلى تمرير المعلمات ، فأنت بحاجة فقط إلى ربط عرض ViewModel فارغ. بعض الناس في حيرة ، لكن الجزء الثالث لا يشعر أنه عملي. إن فهم المدون هو أن عنصر DOM يحتاج إلى استخدام بيانات البيانات لربط البيانات ، ويجب تمكين ربط KO ، وهو ko.applybindings () هنا.
احصل على التأثير:
6.2. معلمة المرور
الخطوة الأولى هي تخصيص ko.bindinghandlers
ko.bindingHandlers.MySelect = {init: function (element ، valueaccessor ، allbindingsaccessor ، viewmodel) {var oparam = valueaccessor () ؛ $ (element) .Multiselect (oparam) ؛} ، update: function ، valueaccors ، allbindingsaccessوالخطوة الثانية هي نفسها كما هو موضح أعلاه ، استخدم هذا الربط المخصص في علامة HTML.
الخطوة 3: مرور في المعلمات عند تنشيط الربط
$ (function () {var multiselect = {enableClickableOpTgroups: true ، // collapse onchange onchange: function (option ، exced) {alert ("select change") ؛}} ؛ ko.applybindings (multiselect) ؛}) ؛من خلال هذه الخطوات الثلاث ، يمكنك تمرير المعلمات إلى تهيئة mutiselect لدينا:
استفسارات الكود: المعلمة الثانية لحدث البداية ، كما قلنا ، وظيفتها الرئيسية هي الحصول على المعلمات المنقولة من ViewModel ، ولكن هنا نحتاج إلى استخدامه كطريقة. لماذا يستخدم الكثير من البقاء لدراسة!
2. المثال الأول لإضافة وحذف وتعديل والبحث
في هذه المرحلة ، تم وضع الأشياء الأساسية أخيرًا. لقد خططت في الأصل لإكمالها في مقال واحد ، لكنني لم أتوقع أن يتم توسيع الأشياء الأساسية كثيرًا! يتم تضمين أمثلة إضافة وحذف وتعديل وفحص في المقالة التالية. يجمع BootStraptable و Knockoutjs لإدراك وظيفة إضافة وحذف وتعديل وفحص [2]. مرحبًا بك في التعلم والتواصل ، وبالطبع نرحب أيضًا بالتوصية به!