Die Zwei-Wege-Bindung des MVVM-Frameworks, dh wenn sich das Objekt ändert, wird der Wert des relevanten DOM-Elements automatisch geändert. Im Gegenteil, wenn sich das DOM -Element ändert, kann der Wert des Objekts automatisch aktualisiert werden. Natürlich bezieht sich das DOM -Element im Allgemeinen auf das Ausgabeeingangselement.
1. Erstens wird eine Einwegbindung implementiert und die Rückruffunktion wird ausgelöst, wenn sich der Eigenschaftswert des angegebenen Objekts ändert.
2. Einweg-Bindung kann die neu zugegebene DefineProperty-Implementierung (oder DefineProperties) in ES5 verwenden. Wenn ES5 verwendet wird, ist es dazu bestimmt, IE9 nicht zu unterstützen. Um das Problem der rekursiven toten Schleife zu verhindern, muss das ursprüngliche Attribut zum Speichern in ein privates Attribut unterbrochen werden.
3.. Das Problem des Umfangs, der sich aus dem Aufruf definierter Property zur Definition von Schließungen in der Schleife ergibt. Um das Problem zu lösen, dass der Wert des Umfangsvariablenobjekts auf den letzten Laufwert abgerufen wird, definieren Sie eine zusätzliche Schicht der Schließfunktion, die sofort aufgerufen wird, um den Wert in zu übergeben.
V. Seine Funktion besteht darin, die private Eigenschaft zu lesen und zu schreiben.
5. Nachdem die Einwegbindung implementiert wurde, wird die umgekehrte Bindung implementiert, dh die UI-Schicht Onchange löst die Aktualisierungsdaten aus. Dies ist relativ einfach. In der DOM ist die Wertänderung des Modells der benutzerdefinierten Eigenschaft Bindkey zugeordnet, und das Oninput -Ereignis wird überwacht. Im Vergleich zu Onchange ist der Vorteil, dass es sich in Echtzeit ändern kann, ohne auf außer Fokus zu warten. Darüber hinaus kann es ausgelöst werden, indem Sie mit der rechten Maustaste, mit dem Menüeinfügen, durch Ziehen von Text in Textfelder usw. ohne blinde Flecken ausgelöst werden. Der Nachteil ist, dass es nur IE9 oder höher unterstützt, aber es gibt gleichwertige On -Propertychange unter IE9 und können verwendet oder kompatibel sein.
6. Zusammenfassung: Das Prinzip der Zwei-Wege-Bindung ist nicht kompliziert. Der Gesamtcode überschreitet nicht 50 Zeilen, was sehr einfach ist. Es gibt jedoch noch einige technische Inhalte. Das Folgende ist der vollständige Code. Wenn Sie kein großes Framework verwenden möchten, können Sie es verwenden. Der folgende IE9 wird nicht unterstützt. Wenn Sie den folgenden IE9 unterstützen möchten, können Sie Avalon verwenden. Es verwendet VBS, um den Get and Set -Accessor zu verkapulieren, was ziemlich leistungsfähig ist.
HTML:
<div id = "container"> <p> Name: <Eingabe type = "text" bindkey = "userername"> </p> <p> Alter: <Eingabe type = "text" Bindkey = "Alter"> </p> <div>
JS:
<script type = "text/javaScript"> Fenster.Model = {Benutzername: "Windy", Alter: 34, Skill: ["JavaScript", "html", "css", "jQuery", "node"],} Funktion BindingModel (Modell, ChangeCallback). Modell .__ privat = {}; Funktion getfn (name) {var result = this .__ private [name] console.log ("Wert erhalten:"+name+"="+result); Rückgabeergebnis; }; Funktion setfn (name, val) {if (this .__ privat [name]! = val) {console.log ("Wert setzen:"+name+"="+val); dies .__ privat [name] = val; if (ChangeCallback) {ChangeCallback (Name, Val); }}}}; Für (Elem in Modell) {if (model.hasownProperty (elem) && elem! = "__ private" && typeof (model [elem])! getfn.call (this, propname)}, set: function (v) {return setfn.call (this, propname, v)}, // Wert: modell [elem], // beschreibbar: true, aufzählbar: true, konfigurierbar: true}}) (Elem, Modell [Elem]); }} Object.DefineProperties (Modell, PropertiesMap)} Funktion Bindingboth (Modell, Dom) {Dom.find ("[Bindkey]"). Jede (Funktion (Element) {var key = $ (this) .attr ("Bindkey"); Modell [Schlüssel] = $ (this) .val (); BindingModel (Modell, Funktion (Name, val) {var el = dom.find ("[Bindkey ="+name+"]"); if (el.val ()! = val) {el.val (val);}}); } BindingBoth (window.model, $ ("#Container")) </script>Die obigen Prinzipien und Implementierungscode des MVVM-Zwei-Wege-Bindungsmechanismus (empfohlen) sind der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.