JavaScript中的2路数据绑定

Question

双向数据结合是指,以变更对象的属性绑定在UI的变化,并且反之亦然的能力.

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

特别是没有框架的双向数据绑定.

Answer 1

更改输入时更新值,将setter添加到设置输入内容的值.例如这个元素:

<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 2

简单有效的双向绑定方法，仅使用普通 JS。

<!-- index.html -->
<form action="#" onsubmit="vm.onSubmit(event, this)">
    <input onchange="vm.username=this.value" type="text" id="Username">
    <input type="submit" id="Submit">
</form>
<script src="vm.js"></script>

// vm.js - vanialla JS
let vm = {
    _username: "",
    get username() {
        return this._username;
    },
    set username(value) {
        this._username = value;
    },
    onSubmit: function (event, element) {
        console.log(this.username);
    }
}

JS Getters 和 Setters 对此非常有用 - 特别是当您查看浏览器支持时。

Answer 3

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

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

您可以检查jsfiddle。