2-Wege-Datenbindung in JavaScript

Question

Zweifache Datenbindung bedeutet, dass Änderungen an den Eigenschaften eines Objekts an Änderungen in der Benutzeroberfläche gebunden werden können und umgekehrt.

Können wir eine 2-Wege-Datenbindung mit JavaScript erreichen?

Besonders 2-Wege-Datenbindung ohne Frameworks.

Answer 1

Ja vollständig möglich. Es wurde von allen gängigen Javascript-Frameworks (angularJS, angular ...) verwendet.

Sie werden hier einige Beispiele (es ist ein bisschen alt, aber Sie sollten einige Ideen) finden http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

Answer 2

Wenn ein Eingang den Wert geändert wird, aktualisieren, einen Setter auf den Wert hinzuzufügen, die die Eingänge Inhalt setzt. Z.B dieses Element:

<input id="age"> 

Und einige js:

var person = (function(el){ 
return { 
    set age(v){ 
    el.value = v; 
    }, 
    get age(){ 
    return el.value; 
    } 
}; 
})(document.getElementById("age")); 

So können Sie tun:

person.age = 15; 

Und so wird der Eingang ändern. Ändern der Eingabe ändert sich person.age

Answer 3

Ja tatsächlich. Es gibt Frameworks wie angular Js, die vollständige Unterstützung für die Zwei-Wege-Datenbindung bietet. Und wenn Sie das gleiche in Vanille erreichen wollen js Sie Wert in den Blick

Eg. document.getElementById('test').value="This is a Test" 

Und binden Ansicht Wert an den Controller binden können Sie OnChange-Ereignis in html auslösen können.

<Input type="text" id="test" onchange="Func()"> 

Answer 4

Ja, wir können die Zwei-Wege-Datenbindung mit reinem Javascript erreichen.

twoWay=function(event) { 
    var elem = document.getElementsByClassName(event.currentTarget.className); 
    for(var key in elem){ 
    elem[key].value=event.currentTarget.value; 
    } 
} 

Sie können die jsfiddle überprüfen.