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。