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

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

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

您可以查看jsfiddle。

Answer 3

确实是的。像angular Js这样的框架提供了对双向数据绑定的完全支持。如果你想在vanilla js中实现相同的功能，你可以将值绑定到视图中

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

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

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

Answer 4

仅使用香草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 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

的完整实现

Answer 6

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

JavaScript

6 个答案: