الربط ثنائي الاتجاه لإطار MVVM ، أي عندما يتغير الكائن ، سيتم تغيير قيمة عنصر DOM ذي الصلة تلقائيًا. على العكس من ذلك ، عندما يتغير عنصر DOM ، يمكن تحديث قيمة الكائن تلقائيًا. بالطبع ، يشير عنصر DOM عمومًا إلى عنصر إدخال الإخراج.
1. أولاً ، يتم تنفيذ الربط أحادي الاتجاه ، ويتم تشغيل وظيفة رد الاتصال عندما تتغير قيمة خاصية الكائن المحدد.
2. يمكن أن يستخدم الربط أحادي الاتجاه تنفيذ DefineProperty المضافة حديثًا (أو DefineProperties) في ES5. إذا تم استخدام ES5 ، فمن المقرر عدم دعم IE9. من أجل منع مشكلة الحلقة الميتة العودية ، يجب تقليص السمة الأصلية إلى سمة خاصة للحفظ.
3. مشكلة النطاق الناشئة عن استدعاء DefineProperty لتحديد الإغلاق في الحلقة. من أجل حل المشكلة التي سيتم استرداد قيمة كائن متغير النطاق إلى قيمة التشغيل الأخيرة ، تحدد طبقة إضافية من وظيفة الإغلاق تسمى على الفور لتمرير القيمة.
4. نحدد وظائف GETFN و SETFN للتشغيل عندما تحصل الخصائص وتعيينها. تتمثل وظيفتها في قراءة وكتابة الخاصية الخاصة __private وتشغيل وظيفة رد الاتصال لإخطار طبقة واجهة المستخدم بتحديث الواجهة.
5. بعد تنفيذ الربط أحادي الاتجاه ، يتم تنفيذ الربط العكسي ، أي أن طبقة واجهة المستخدم يؤدي إلى بيانات التحديث. هذا سهل نسبيا. في DOM ، يرتبط تغيير قيمة النموذج بـ BindKey المخصصة ، ويتم مراقبة حدث ONINPUT. بالمقارنة مع OnChange ، فإن ميزة ذلك هو أنه يمكن أن يتغير في الوقت الفعلي دون الانتظار خارج التركيز. علاوة على ذلك ، يمكن تشغيله عن طريق النقر بزر الماوس الأيمن فوق لصق القائمة ، وسحب النص إلى مربعات نصية ، وما إلى ذلك ، مع عدم وجود بقع عمياء على الإطلاق. العيب هو أنه يدعم IE9 فقط أو أعلى ، ولكن هناك ما يعادل onpropertychange أدناه IE9 ويمكن استخدامه أو التوافق.
6. ملخص: مبدأ الربط ثنائي الاتجاه ليس معقدًا. الكود الكلي لا يتجاوز 50 سطرًا ، وهو أمر بسيط للغاية. ومع ذلك ، لا يزال هناك بعض المحتوى الفني. ما يلي هو الرمز الكامل. إذا كنت لا ترغب في استخدام إطار عمل ضخم ، فيمكنك استخدامه. ما يلي IE9 غير مدعوم. إذا كنت تريد دعم IE9 التالي ، فيمكنك استخدام Avalon. يستخدم VBS لتغليف Get and Set Accessor ، وهو قوي جدًا.
HTML:
<div id = "container"> <p> الاسم: <input type = "text" bindKey = "username"> </p> <p> العمر: <input type = "text" bindkey = "age"> </p> <viv>
JS:
<script type = "text/javaScript"> window.model = {username: "Windy" ، العمر: 34 ، المهارة: ["JavaScript" ، "html" ، "css" ، "jquery" ، "node"] ،} pindingmodel (model ، changeCallback) {var properiesmap = {} ؛ نموذج .__ private = {} ؛ وظيفة getFn (name) {var result = this .__ private [name] console.log ("Get value:"+name+"="+result) ؛ نتيجة العودة } ؛ وظيفة setfn (name ، val) {if (this .__ private [name]! = val) {console.log ("set value:"+name+"="+val) ؛ هذا .__ الخاص [الاسم] = Val ؛ if (changeCallback) {ChangeCallback (name ، val) ؛ }}}} ؛ لـ (elem in model) {if (model.hasownproperty (elem) && elem! = "__ private" && typeof (model [elem])! = "function") {(function (propname ، propvalue) {model .__ private [propname] = propvalue ؛ getfn.call (this ، propname)} ، set: function (v) {return setfn.call (this ، propname ، v)} ، }} object.defineProperties (النموذج ، propertiesMap)} دالة bindingboth (النموذج ، dom) {dom.find ("[bindkey]"). كل (وظيفة (عنصر) {var key = $ (this) .Attr ("bindkey") ؛ $ (this) .val (model [key]) ؛ $ (this). نموذج [مفتاح] = $ (هذا) .val () ؛ BINDINGMODEL (النموذج ، الدالة (الاسم ، VAL) {var el = dom.find ("[[bindKey ="+name+"]") ؛ if (el.val ()! = val) {el.val (val) ؛}}) ؛ } bindingboth (window.model ، $ ("#container")) </script>المبادئ المذكورة أعلاه ورمز التنفيذ لآلية الربط ثنائي الاتجاه (الموصى بها) هي المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.