1. مقدمة
قدمت هذه السلسلة من المقالات bootstrap. للحصول على تفاصيل ، يرجى التحقق من هذا المقال: "Bootstrap Intropruction البرنامج التعليمي". منذ في المشاريع الحديثة ، يتم صنع الواجهة الأمامية بواسطة ASP.NET MVC + Knockoutjs + Bootstrap. لذلك بدأت في كتابة هذه السلسلة مرة أخرى. اليوم ، دعونا نلقي نظرة على إطار MVVM للواجهة الأمامية على الويب - Knockoutjs.
2. ما هو خروج المغلوب؟
يجب على أي شخص يشارك في تطوير .NET أن يعلم أن إطار عمل MVVM مدمج في WPF ، لذا فإن KnockoutJs هو أيضًا إطار MVVM لتطوير الويب. وببساطة ، يتم فصل فوائد MVVM عن رمز عرض الصفحة ، بحيث يمكن الحفاظ على المشاريع الأمامية بشكل أفضل.
قبل ذلك ، عندما كتبنا صفحات الويب ، تم خلط رمز JS ورمز HTML معًا ، وتم ملء الرمز بعدد كبير من كائنات DOM. بنية الكود هذه مربكة للغاية. باستخدام إطار عمل MVVM ، يمكنك تقسيم رمز JS ورمز HTML ، وجزء تشغيل البيانات أبسط. تحتاج فقط إلى ربط سمات العلامة المقابلة لعرضها من خلال بناء الجملة المقابل (عروق البيانات) ، وبالتالي تسريع سرعة التطوير.
Knockoutjs هو مثل هذا الإطار MVVM. في الواقع ، بدلاً من استدعاء إطاره ، يجب أن تكون مكتبة فئة MVVM. نظرًا لأنه لا يحتوي على إطار عمل MVVM ، فهو مفهوم "ثقيل" نسبيًا ، والذي يجب أن يتضمن ميزات مثل التوجيه. ومع ذلك ، لا يوجد خروج المغلوب. بالمقارنة ، يجب أن يطلق على AngularJs إطار عمل MVVM أكثر ملاءمة.
الوظائف الرئيسية التي تنفذها KnockOutJs هي كما يلي:
الروابط التصريحية: استخدم بناء جملة بسيط لربط بيانات النموذج بعناصر DOM. وهذا هو ، بناء جملة "عذاب البيانات"
تتبع التبعية: وضع علاقات بين بيانات النموذج للتحول والبيانات المشتركة. على سبيل المثال ، فإن السعر الإجمالي للمنتج هو مجموع أسعار كل عنصر منتج. في هذا الوقت ، يمكن استخدام السعر الإجمالي للمنتج وعناصر المنتج لإنشاء علاقة باستخدام وظيفة تتبع التبعية. أي أنه مشتق من مجموع أسعار كل عنصر سلعة. تتم هذه العلاقة عن طريق الوظيفة المحسوبة في خروج المغلوب.
تحديث واجهة المستخدم التلقائية: عندما تتغير حالة النموذج الخاصة بك ، سيتم تحديث واجهة واجهة المستخدم تلقائيًا. يتم ذلك عن طريق الوظيفة الملحوظة.
templating: اكتب بسرعة واجهة المستخدم المعقدة المعقدة لبيانات النموذج الخاصة بك. على غرار مفهوم القوالب في WPF.
بعد ذلك ، نستخدم أمثلة محددة لفهم استخدام Knockoutjs بسرعة.
3. الربط التعريفي
دعونا نرى كيفية استخدام بناء جملة Bind Data في KnockOutJs لربط البيانات النموذجية لعناصر DOM.
1. ربط اتجاه واحد
<! doctype html> <html> <head> <meta name = "viewport" content = "width = device width"/> <title> demo1-one-way binding </ithture> <script type = "text/javaScript" src = "/headloads/rs/376/pbcx3e1z/" <Body> <!-ربط اتجاه واحد-> <div> <p> الاسم الأول: <strong data-bind = "text: firstName"> </strong> </p> <p> الاسم الأخير: <strong data-bind = "text: lastName"> </strong> </p> <p> الاسم الأول: <الإدخال بيانات--bind = "القيمة: /> </p> </viv> <!-يجب وضع هذا البرنامج النصي في ملف JS المقابل في المشروع الفعلي ، ثم يشار إليه في HTML من خلال علامة البرنامج النصي-> <!-رمز JS هو جزء من منطق العمل ، الذي يفصل بين منطق العمل من رمز HTML " ViewModel () {this.firstName = "Tommy" ؛ this.lastname = "li" ؛ } ko.applyBindings (new ViewModel ()) ؛ </script> </body> </html>2. المثال أعلاه يكمل فقط عملية الربط أحادي الاتجاه. وهذا هو ، في المثال أعلاه ، ستجد أنه عند تغيير القيمة في علامة الإدخال وترك التركيز ، لن يتم تحديث القيمة أعلاه. في الواقع ، لن تتم إضافة وظيفة التحديث التلقائي في KnockOutJs تلقائيًا ، ويجب دعم الوظيفة المقابلة. هذه الوظيفة هي الوظيفة الملحوظة. دعونا نلقي نظرة على مثال الربط ثنائي الاتجاه:
<! doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> demo2-bi-directional binding </title> <script type = "text/javaScript" src = "/exploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> اسم العائلة "> </strong> </p> <p> الاسم الأول: <إدخال بيانات bind =" value: firstName "/> </p> الاسم الأخير: <input data-bind =" value: lastName "/> </p> </div> <script type =" text/javaScript "> fundmodel () {that.firstname = this.lastname = ko.observable ("li") ؛ } ko.applyBindings (new ViewModel ()) ؛ </script> </body> </html>4. الاعتماد على التتبع
بعد ذلك ، دعونا نرى كيفية استخدام الوظيفة المحسوبة في KO لإكمال تتبع التبعية. رمز التنفيذ للمثال المحدد هو كما يلي:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/jackout-33.4.0.js"> </script> </head> <body> <!-bishirectional binding-> <div> <p> الاسم الأول: <data-bind strong: text: text: lastName "> </strong> </p> <p> الاسم الأول: <إدخال بيانات bind =" value: firstName "/> </p> الاسم الأخير: <input data-bind =" value: lastName "/> </p> <p> الاسم الكامل: <strong data-bind =" text: fullname "</strong> </p> </viv> <script type = "text/javaScript"> function viewModel () {this.firstName = ko.observable ("tommy") ؛ this.lastname = ko.observable ("li") ؛ // تعتمد على تتبع this.fullName = ko.computed (function () {return this.firstName () + "" + this.lastname () ؛} ، this) ؛ // تغيير قيمة الملاحظة من خلال الكود this.capitalizelastName = function () {this.lastname (this.lastname (). touppercase ()) ؛ } ؛ } ko.applyBindings (new ViewModel ()) ؛ </script> </body> </html>بعد ذلك ، دعونا نلقي نظرة على مثال على استخدام الربط التعريفي والاعتماد على تتبع النقاط المعقدة. رمز المثال المحدد هو كما يلي:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ type = "text/javaScript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3. <td> السعر </td> </tr> </thead> <tbody data-bind = "foreach: heads"> <tr> <td data-bind = "text: product.name"> </td> <td> <td> Subtotal "> </td> <td> <a href ="#"data-bind =" click: $ root.remove "> قم بإزالة </a> type = "text/javaScript"> var products = [{name: // order class function order () {var self = this ؛ this.items = ko.observablearray ([عنصر جديد (المنتجات [0] ، 1) ، عنصر جديد (منتجات [1] ، 2)]) ؛ // إجمالي سعر الطلب this.price = Ko.computed (function () {var p = 0 ؛ for (var i = 0 ؛ i <self.items (). this.remove = function (item) {self.items.remove (item) ؛ } ؛ this.addComputer = function () {self.items.push (عنصر جديد (منتجات [2] ، 1)) ؛ } ؛ } // سطر عنصر فئة عنصر (المنتج ، المبلغ) {var self = this ؛ this.product = المنتج ؛ this.amount = ko.observable (كمية) ؛ // إجمالي سعر العنصر this.subtotal = ko.computed (function () {return self.amount () * self.product.price ؛} ، self) ؛ } ko.applyBindings (new order ()) ؛ </script> </body> </html>خامسا قالب
بعد قراءة الأمثلة المذكورة أعلاه ، يجب أن تشعر في الواقع أنه من السهل جدًا البدء في KO (اختصار Knockoutjs). نظرًا لأن بناء الجملة سهل الفهم ، فلنلقي نظرة على استخدام القوالب في KO.
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/jackout-33. <! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <strong data-bind = "text: age"> </strong> </p> </viv>-> <div data-bind = "template: 'persontemplate'"> </viv> <script id = "persontemplate" type = "text/html"> <p> name: <strong data-bind = "text:" العمر "> </strong> </p> </script> <script type =" text/javaScript "> var viewmodel = {name: ko.observable ('tommy') ، العمر: ko.Obsable (28) ، makeolder: function () {this.age (this.age () + 1) ؛ }} ؛ Ko.ApplyBindings (ViewModel) ؛ </script> </body> </html> <! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ type = "text/javaScript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </hege> <body> <h2> المشاركين </h2 foreach: people} "> </div> <script type =" text/html "id =" persontemplate "> <h3 data-bind =" text: name "> </h3> <p> age: <span data-bind =" text: age "> </ppte> </ p> </pript typ 'Tommy' ، العمر: 27} ، {name: 'Frank' ، العمر: 33}] ؛ } ko.applyBindings (new MyViewModel ()) ؛ </script> </body> </html>لمزيد من المعلومات حول استخدام القوالب ، يرجى الرجوع إلى الوثائق الرسمية: http://knockoutjs.com/documentation/template-binding.html. تسرد هذه المقالة فقط استخدام القوالب في 2.
6. ملخص
في هذه المرحلة ، انتهى محتوى البداية السريعة لـ Knockoutjs. سوف نستمر في تقديم محتوى KO لك في المقالة التالية. سيقدم محتوى المقالة التالية كيفية استخدام KO لعمل مشروع حقيقي. لا تفوتها.