JavaScript中的2路数据绑定

Question

双向数据绑定是指能够将对象属性的更改绑定到UI中的更改，反之亦然。

我们可以使用JavaScript实现双向数据绑定吗？

尤其是没有框架的双向数据绑定。

Answer 1

是完全可能的。它已被所有主要的javascript框架（angularJS，angular ...）使用。

你会发现这里的一些例子（这是一个有点老，但应该给你一些想法）当输入变为更新的价值，一个setter添加到其设置的输入内容的价值http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

Answer 2

。 E.g这个元素：

<input id="age"> 

而一些JS：

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

所以，你可以这样做：

person.age = 15; 

和输入将改变。改变输入变化person.age

Answer 3

是的。 有像角度Js这样的框架可以提供对双向数据绑定的全面支持。 如果你想实现香草同JS可以绑定值眼帘

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

，并查看值绑定到控制器，你可以触发HTML onchange事件。

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

Answer 4

是的，我们可以使用纯javascript实现双向数据绑定。

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

您可以检查jsfiddle。