JavaScript 中的 2 路数据绑定答案

【问题标题】：2 way data binding in JavaScriptJavaScript 中的 2 路数据绑定
【发布时间】：2018-01-11 09:37:08
【问题描述】：

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

我们可以用 JavaScript 实现 2-way 数据绑定吗？

特别是没有框架的 2 路数据绑定。

【问题讨论】：

可能，使用 getter 和 setter。
是的！例如 Angular 在你的 UI 和控制器之间使用两种方式绑定

标签： javascript

【解决方案1】：

当输入改变时更新值，添加一个设置器到设置输入内容的值。例如这个元素：

<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

【讨论】：

您的意思是setAge(v) 和getAge()？
@GabrielWest 我没有。
@JonasWilms 如何检查输入是否更改了 person.age？我尝试在set age() { } 中添加一条日志语句，但没有成功。
@overlord 它没有。访问 person.age 会从输入中检索更新的值。

【解决方案2】：

确实如此。有像 angular Js 这样的框架，它为两种方式的数据绑定提供了全面的支持。如果你想在 vanilla js 中实现同样的效果，你可以将值绑定到视图中

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

要将视图值绑定到控制器，您可以在 html 中触发 onchange 事件。

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

【讨论】：

你在混合 jquery 和 vanillaJS

【解决方案3】：

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

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

您可以查看jsfiddle。

【讨论】：

【解决方案4】：

简单且有效的双向绑定方法，仅使用 vanilla 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 Getter 和 Setter 非常适合这一点 - 特别是当您查看浏览器支持时。

【讨论】：

【解决方案5】：

您是否介意它是一个用于数据绑定任务的小组件，提供足够方便的数据绑定定义命令。我用databindjs做到了。例如

// Lets assume that there is just simple form (target)
var simpleForm = {
   input: $('.simple .input-value'),
   output: $('.simple .output-value')
};
// And here is the simple model object (source)
var model = {
    text: 'initial value'
};

// Lets set two directional binding between [input] <-> [text]
var simpleBinding = bindTo(simpleForm, () => model, {
    'input.val': 'text',  // bind to user input
    'output.text': 'text'  // simple region that will react on user input
});
// This command will sync values from source to target (from model to view)
updateLayout(simpleBinding);
subscribeToChange(simpleBinding, () => {
    $('.simple .console').html(JSON.stringify(model));
});
// Just initialize console from default model state
$('.simple .console').html(JSON.stringify(model));

完整解决方案here。可以查看数据绑定核心的完整实现on github

【讨论】：

【解决方案6】：

LemonadeJS 是另一个微型库 (4K)，没有值得关注的依赖项。 https://lemonadejs.net https://github.com/lemonadejs/lemonadejs

【讨论】：