في مقالة التجربة الأولى لـ KnockoutJS التعليمية (I) ، تم ذكر أن طريقة ربط البيانات = "XX: OO" في KO لا يمكنها فقط ربط النص والقيمة ، وما إلى ذلك ، ولكن أيضًا ربط سمات الأناقة وسمات المظهر الأخرى ، النقر ، النقر ، الأحداث النصية ، وحتى تدفق برنامج التحكم. الحزم الفاخرة المختلفة سوف ترضي بالتأكيد خيالك.
يتحدث بما يلي بإيجاز عن استخدام الارتباطات المختلفة ، والتي يتم تقسيمها بشكل أساسي إلى ثلاثة أنواع: التمثيل والعملية والتفاعل وفقًا للخصائص المرتبطة.
سمات الأداء
تتضمن سمات الربط لفئة العرض التقديمي مرئيًا ونصًا و HTML و CSS و Style و Ardt. باستثناء الفصل الذي يمثل CSS CSS ، من السهل فهم كل شيء آخر. بالطبع ، يجب أن تكون التسمية في الأسلوب متسقة مع JS ، ويجب إزالتها - تم تغييرها إلى تسمية الجمل ، كما هو موضح أدناه:
<!-HTML CODE-> <div data-bind = "disible: يجب أن تكون showmessage"> سترى هذه الرسالة فقط عندما يحمل "shouldshowmessage" قيمة حقيقية. </div> <div> رسالة اليوم هي: <span data-bind = "text: mymessage"> </span> </div data-bind = proffwarning: currentProfit () <0} "> اختبار ربط الفئة CSS </div> <div data-bind =" {color: currentProfit () <0؟ {يجب أن يكون showmessage: ko.observable (صواب) ، // الرسالة في البداية VisiPlemySageAge: ko.Observable () ، // في البداية blankDetails: ko.observable () ، // لا نطبق "blankCurrentProfit: ko.observable (150000) ، // القيمة الإيجابية ، Ko.Observable (150000) ، // قيمة إيجابية ، لذلك في البداية ابتلاع: ko.observable ("year-end.html") ، urltitle: ko.observable ("التقرير بما في ذلك إحصاءات نهاية السنة النهائية")} ؛ ko.applybindings (viewmodel) ؛ // تطبيق الربطالتأثير مثل هذا:
كما هو مذكور في المقالة السابقة ، بالإضافة إلى السمات الفردية لـ XXOO ، يمكنك أيضًا تمرير كائنات JSON ، أي يمكنك الجمع بين سمات الربط ، مثل:
<!-رمز html-> <div data-bind = "{visible: يجب أن يكون showmessage ، النص: mymessage ، css: {proffwarning: currentProfit () <0}}"بالطبع التأثير مثل هذا:
إعداد فئة العرض بسيط نسبيًا. شيء واحد يجب ملاحظته هو أن العديد من فئات العرض التقديمي لا تحتاج إلى تغيير ديناميكي. في هذا الوقت ، يمكنك استخدام إعدادات ViewModel لتحقيق التهيئة المركزية للبيانات ، ولكن لا تضعها على الملاحظات ، مثل:
// js codevar viewModel = {shouldShowMessage: ko.observable (true) ، // message في البداية VisiPlemySage: "لا يتطلب هذا النص تحديثًا ديناميكيًا" // فارغ في البداية} ؛سمات فئة العملية
تشمل فصول العمليات foreach ، إذا ، IFNOT ، مع وروابط "مكون" أكثر تقدما. إذا كانت و ifnot تشبه مرئية. الفرق هو: إذا كانت ستزيل المكونات المقابلة مباشرة من DOM ، في حين أن عناصر التحكم المرئية فقط شاشة مخفية ، ولا تزال المكونات في DOM. مع نفس التأثير كما في JS ، وهو تمديد سلسلة النطاق. بعبارات بسيطة ، هو إضافة "بادئة". قبل المتغير. هنا سأقدم فقط foreach ، ويتم وضع المكون مع ربط القالب.
تحقق من الرمز:
<!-HTML Code-> <p> اختبار foreach ربط </p> <ul data-bind = "foreach: people"> <li> رقم <span data-bind = "text: $ index"> </span> اسم الناس: <span data-bind = "text: name"> </span> <a href = "#" data-bind = "click: HREF = "#" data-bind = "انقر فوق: إزالة"> إزالة </a> </li></ul> <input type = "button" data-bind = "click: addpeople" value = "add"/> var listmodel = function () {// قم بتعيين قيمة مجموعة الأشخاص (الأشخاص في الواقع عبارة عن وظيفة وظيفة). استخدم Foreach لاجتياز كائن الصفيف // UL ، يتوافق LI مع أطفال الناس والأشخاص. لذلك ، عند ربط LI داخليًا ، يكون النطاق في الطفل {name ...}. من أجل استدعاء removepeople خارج الأشخاص ، يكون الوالد $ مطلوبًا // إذا كان يطلق عليه إزالة داخليًا ، فهذا في الإزالة هو {name ...} المقابل لعنصر LI الحالي ، والنطاق هو المجال الحالي ، لا يلزم وجود الوالد $. this.people = ko.observablearray ([{{name: "mark zake" ، remove: function () {that.people.remove (this) ؛ // لاحظ الكائن الحالي (هذا هو {name ...}) والنطاق. {that.people.remove (this) ؛}} ، {name: "Green Deny" ، remove: function () {that.people.remove (this) ؛}}]) ؛ سيتغير هذا ، ويجب حفظ هذا مسبقًا وتمريره. var that = this ؛ this.addpeople = function () {that.people.push ({name: new date (). ما تريد تنفيذه هو listmodel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this) ؛}} ؛ ko.applyBindings (new listmodel ()) ؛ما هو أسهل في الفوضى هنا هو المراسلات الهرمية بين عقدة DOM و ViewModel. أولاً ، تقدم بطلب للحصول على ربط على UL ، أي أن كل LI يتوافق مع كل طفل. بعد ذلك يتوافق مع ذلك ، يمكنك فهمه وفقًا لقواعد نطاق JS. الحديث عن النطاق ، يجب أن أذكر هذا. كما يقول المثل ، أنا أعامل هذا كما لو كنت حبي الأول ، وهذا ما خدعني آلاف المرات. هنا ، أضافت Xiaojia وظيفة إزالة إلى الإصدار الرسمي ، وهو أمر بسيط يتوافق مع RemovePeople الرسميين. أما بالنسبة للمتغيرات مثل $ index و $ Parent ، فما عليك سوى فهمها حرفيًا.
سمات فئة التفاعل
أخيرًا ، حان الوقت للحصول على هذه النقطة. السبب الأكثر أهمية لاستخدام KO هو التعامل مع مشكلة عرض واجهة المستخدم التفاعلية الديناميكية. سنقدم هنا بعض الروابط المتعلقة بالنماذج.
(1) انقر فوق الربط
بناء الجملة: Data-Bind = "Click: ClickHandler". يمكن أن تكون وظيفة ClickHandler هنا أي وظيفة ، وليس بالضرورة وظيفة في ViewModel ، طالما يمكن الرجوع إليها. هناك بعض الأشياء التي يجب ملاحظتها حول حدث النقر:
1. Parmeter Pass ، تقوم KO بتمرير المكون الحالي باعتباره المعلمة الأولى لوظيفة ClickHandler بشكل افتراضي. انتبه إلى سياق الربط الحالي هنا. على سبيل المثال ، في البيئة مع ، سيصبح المكون الذي تم إرجاعه هو المكون مع المكون الحالي الذي تريده. إذا كنت بحاجة أيضًا إلى تمرير معلمة الحدث ، فمرر الحدث كمعلمة ثانية. إذا كنت بحاجة إلى تمرير المزيد من المعلمات ، فأنت بحاجة إلى لفها بوظيفة. يحب:
<button button data-bind = "انقر: الدالة (البيانات ، الحدث) {myFunction ('param1' ، 'param2' ، البيانات ، الحدث)}"> انقر فوق لي </button>2. إعدادات السلوك الافتراضي (مثل الروابط)
يحظر KO سلوك الحدث الافتراضي ، وعادة ما نربط أحداث النقر للروابط ولن نسمح لهم بالقفز. ومع ذلك ، إذا كان عليك تمكينه ، فما عليك سوى إرجاع True في ClickHandler.
3. فقاعة
يُسمح لـ KO بالفقاعة افتراضيًا. يمكنك تعيين حدث Click Not to Bubble بواسطة Data-Bind = "Click: ClickHandler ، ClickBubble: false".
(2) الحدث ملزمة
يوفر KO هذه الواجهة للمستخدمين لتخصيص أحداث الربط. فيما يتعلق بتمرير المعلمة ، والسلوك الافتراضي ، والفقاعات ، وما إلى ذلك ، مثل النقر فوق الربط ، استخدم الحالة:
<div> <div data-bind = "event: {mouseover: enipperetails ، mouseout: distabletails}"> mouse over me </div> <div data-bind = "visible: devalityeabled"> التفاصيل </div> </div> <script type = "text/javascript {this.detailsEnabled (true) ؛} ، disabledetails: function () {this.detailsenabled (false) ؛}} ؛ ko.applybindings (viewModel) ؛ </script>(3) إرسال الربط
يستخدم بشكل أساسي للقيام ببعض أعمال التحقق من شكل التحقق. ستقوم KO بمنع إجراء نموذج التقديم الافتراضي ونقله إلى وظيفة الإرسال المربوطة. عندما تحتاج إلى الإرسال في المستقبل ، ارجع صحيحًا في حدث الربط.
ملاحظة: لماذا لا تستخدم انقر فوق أحداث في النموذج للتعامل معها؟ نظرًا لأن الإرسال مصمم في الأصل للتعامل مع أحداث التقديم ، يمكنه أيضًا قبول إجراءات التقديم مثل عودة النقل ، ولكن لا يمكن النقر.
(4) القيمة مرتبطة بالنص
تبدو قيمة الربط والفصل النص في مربع الإدخال متشابهة ، ولكن من المستحسن استخدام حدث TextInput للربط ، لأن TextInput هو حدث جديد يستخدم خصيصًا لمعالجة أحداث الإدخال. كما ترون في المقالة السابقة ، عند استخدام الإدخال (اليسار) لربط القيمة ، يجب نقل التركيز من مربع الإدخال قبل تحديثه ، بينما يتم تحديث TextInput (يمين) على الفور.
على الرغم من أن ربط القيمة يمكن أن يحقق أيضًا نفس التأثير مثل TextInput عن طريق تعيين data-bind = "{value: price ، valueupdate: 'efrekekedown'}" ، هذا غير متوافق مع textinput في المتصفح.
(5) ربط الخيارات (محدد)
في القائمة المنسدلة ، يمكن استخدام الخيارات لربط قيمة الطفل. يمكن للطفل إما سلسلة أو كائن JS. يُظهر المقال السابق ([Jackoutjs Learning Experience Journey] (1) KO First Experience) سلاسل ، وهذه المرة سأقوم بتمرير كائن:
شفرة:
<p> بلدك: <حدد data-bind = "الخيارات: متاح ، OptionStext: 'CountryName' ، القيمة: selectCountry ، OptionScaption:" اختر ... ""> </select> </p> <div data-bind = "selectible: selectCountry"> <! selectCountry (). countrypopulation: "غير معروف" "> </span>. </div> <script type =" text/javaScript "> // constructor لكائن مع اثنين من propertiesvar country = function (name ، supa) البلد ("المملكة المتحدة" ، 65000000) ، بلد جديد ("الولايات المتحدة الأمريكية" ، 320000000) ، بلد جديد ("السويد" ، 29000000))) ، SelectCountry: ko.observable () // لا شيء محدد بشكل افتراضي} ؛ ko.applybindings (viewmodel) ؛ </script>فيما يلي خيار لربط خيار مربع القائمة ، ويتم استخدام قيمة لربط العنصر المحدد. نظرًا لأن الخيارات هي كائنات JS ، فأنت بحاجة إلى استخدام OptionText لتحديد الشاشة في مربع القائمة. يشير OptionCaption إلى قيمة العرض الافتراضية عند تحديد أي عنصر. إذا قمنا بتعيين مربع قائمة متعددة ، فلا يمكننا استخدام القيمة لربط العناصر المحددة. في هذا الوقت ، يجب استخدام SelectOptions لربط العناصر المحددة.
(6) روابط أخرى: تمكين/تعطيل ، hasfocus ، فحص ، uniquename.
هذه الأحداث بسيطة للغاية للاستخدام ، لذلك لن أقدمها بالتفصيل. يتم استخدام آخر اسم Eniquename لتعيين سمة الاسم الفريدة لعنصر التحكم في النموذج. عندما يتم إرسال النموذج إلى الخلفية ، لن يتم إرساله إلى الخلفية دون تعيين قيمة سمة الاسم ، لذلك هناك وظيفة الربط مثل هذه. هناك تأثير شائع نسبيًا على hasfoucus في الموقع الرسمي:
اسم:
الاسم: بيرت بيرنغتون
انقر على الاسم لتحريره ؛ انقر في مكان آخر لتطبيق التغييرات.
يمكن أن يصبح النقر على الاسم أعلاه قابلاً للتحرير ، ثم فقدان التركيز ثم يصبح نصًا عاديًا. هذا التأثير سهل التنفيذ مع KO.
لخص
تقدم هذه المقالة بشكل أساسي طرق الاستخدام لمختلف الارتباطات في KnockoutJs . باستخدام مزيج من طرق الربط هذه ، يمكنك ببساطة إنشاء صفحة واجهة المستخدم التي تتطلب تفاعلات أكثر ديناميكية. أهم شيء لاستخدام هذه الأساليب هو أن نتذكر أن جميع الروابط هي كائنات الوظائف ، بحيث يمكنك العمل مباشرة في HTML ، بحيث يمكن في بعض الأحيان أن تكون بنية رمز JS أكثر بساطة.
البرنامج التعليمي الرسمي: http://knockoutjs.com/documentation/introduction.html