การเชื่อมโยงสองทางของเฟรมเวิร์ก MVVM นั่นคือเมื่อวัตถุเปลี่ยนไปค่าขององค์ประกอบ DOM ที่เกี่ยวข้องจะมีการเปลี่ยนแปลงโดยอัตโนมัติ ในทางตรงกันข้ามเมื่อองค์ประกอบ DOM เปลี่ยนไปค่าของวัตถุสามารถอัปเดตโดยอัตโนมัติ แน่นอนองค์ประกอบ DOM โดยทั่วไปหมายถึงองค์ประกอบอินพุตเอาต์พุต
1. ขั้นแรกการเชื่อมโยงทางเดียวจะถูกนำมาใช้และฟังก์ชั่นการเรียกกลับจะถูกเรียกใช้เมื่อค่าคุณสมบัติของการเปลี่ยนแปลงของวัตถุที่ระบุ
2. การเชื่อมโยงทางเดียวสามารถใช้การใช้งานที่เพิ่มขึ้นใหม่ (หรือ defineproperties) ใน ES5 หากใช้ ES5 มันจะถูกกำหนดให้ไม่สนับสนุน IE9 เพื่อป้องกันปัญหาการวนซ้ำแบบเรียกซ้ำคุณลักษณะดั้งเดิมจะต้องถูกตัดเป็นแอตทริบิวต์ส่วนตัวเพื่อบันทึก
3. ปัญหาของขอบเขตที่เกิดขึ้นจากการโทรหา DefinEproperty เพื่อกำหนดปิดในวง เพื่อที่จะแก้ปัญหาที่ค่าของวัตถุตัวแปรขอบเขตจะถูกเรียกคืนไปยังค่ารันสุดท้ายให้กำหนดฟังก์ชันการปิดชั้นเพิ่มเติมที่เรียกว่าทันทีเพื่อส่งผ่านค่าใน
4. เรากำหนดฟังก์ชั่น getfn และ setfn เพื่อทริกเกอร์เมื่อคุณสมบัติได้รับและตั้งค่า ฟังก์ชั่นของมันคือการอ่านและเขียนคุณสมบัติส่วนตัว __rivate และทริกเกอร์ฟังก์ชั่นการโทรกลับเพื่อแจ้งเลเยอร์ UI เพื่ออัปเดตอินเทอร์เฟซ
5. หลังจากการเชื่อมโยงทางเดียวถูกนำไปใช้แล้วการเชื่อมโยงย้อนกลับจะถูกนำไปใช้นั่นคือเลเยอร์ UI OnChange กระตุ้นข้อมูลการอัปเดต นี่ค่อนข้างง่าย ใน DOM การเปลี่ยนแปลงค่าของโมเดลนั้นเชื่อมโยงกับคุณสมบัติ Bindkey ที่กำหนดเองและมีการตรวจสอบเหตุการณ์ oninput เมื่อเทียบกับการชาร์จข้อได้เปรียบของมันคือมันสามารถเปลี่ยนแปลงได้แบบเรียลไทม์โดยไม่ต้องรอการโฟกัส ยิ่งไปกว่านั้นมันสามารถเรียกใช้โดยการวางคลิกขวาการวางเมนูการลากข้อความลงในกล่องข้อความ ฯลฯ โดยไม่มีจุดบอดเลย ข้อเสียคือมันรองรับ IE9 หรือสูงกว่าเท่านั้น แต่มี onPropertyChange เทียบเท่าด้านล่าง IE9 และสามารถใช้หรือเข้ากันได้
6. สรุป: หลักการของการผูกสองทางไม่ซับซ้อน รหัสโดยรวมไม่เกิน 50 บรรทัดซึ่งง่ายมาก อย่างไรก็ตามยังมีเนื้อหาทางเทคนิคอยู่บ้าง ต่อไปนี้เป็นรหัสที่สมบูรณ์ หากคุณไม่ต้องการใช้เฟรมเวิร์กขนาดใหญ่คุณสามารถใช้งานได้ ไม่รองรับ IE9 ต่อไปนี้ หากคุณต้องการสนับสนุน IE9 ต่อไปนี้คุณสามารถใช้ Avalon มันใช้ VBS เพื่อห่อหุ้ม Accessor Get และ Set ซึ่งค่อนข้างทรงพลัง
html:
<div id = "container"> <p> ชื่อ: <อินพุต type = "text" bindkey = "ชื่อผู้ใช้"> </p> <p> อายุ: <อินพุต type = "text" bindkey = "อายุ"> </p> <div>
JS:
<script type = "text/javascript"> window.model = {ชื่อผู้ใช้: "Windy", อายุ: 34, ทักษะ: ["JavaScript", "html", "css", "jQuery", "node"],} ฟังก์ชั่น bindingModel รุ่น .__ ส่วนตัว = {}; ฟังก์ชั่น getfn (ชื่อ) {var result = this .__ ส่วนตัว [ชื่อ] console.log ("รับค่า:"+ชื่อ+"="+ผลลัพธ์); ผลการกลับมา; - ฟังก์ชั่น setfn (ชื่อ, val) {if (this .__ ส่วนตัว [ชื่อ]! = val) {console.log ("ค่าตั้งค่า:"+ชื่อ+"="+val); . __ ส่วนตัว [ชื่อ] = val; if (changecallback) {changecallback (ชื่อ, val); - สำหรับ (elem in model) {ถ้า (model.hasownproperty (elem) && elem! = "__ ส่วนตัว" && typeof (โมเดล [elem])! = "ฟังก์ชั่น") {(ฟังก์ชั่น (propname, propvalue) {model. getfn.call (นี่, propname)}, set: function (v) {return setfn.call (นี่, propname, v)}, // value: โมเดล [elem], // เขียนได้: จริง }} Object.defineProperties (โมเดล, คุณสมบัติ map)} ฟังก์ชั่น bindingboth (โมเดล, dom) {dom.find ("[bindkey]"). แต่ละ (ฟังก์ชั่น (รายการ) {var key = $ (this) .attr ("bindkey"); รุ่น [key] = $ (this) .val ();})}); bindingModel (โมเดล, ฟังก์ชัน (ชื่อ, val) {var el = dom.find ("[bindkey ="+name+"]"); ถ้า (el.val ()! = val) {el.val (val);}}); } bindingboth (window.model, $ ("#container"))) </script>หลักการและรหัสการใช้งานข้างต้นของกลไกการผูกสองทาง MVVM (แนะนำ) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น