首页  >  文章  >  web前端  >  js实现双向数据绑定的方法

js实现双向数据绑定的方法

一个新手
一个新手原创
2017-10-11 10:28:132267浏览


需求

现在的框架都讲究什么单向绑定,双向绑定的都是什么东西?
- 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。
- 双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。就是我不管修改数据模型的相关数据,还是视图上的数据,相对应的数据也会跟着更新。

实现原理

主要的就是事件的绑定。
- 在视图层(View)上,可以绑定keyup事件,来更新数据模型
- 在数据模型上面利用Object.defineProperty()方法定义对象的set方法,在触发对象属性设置时,将view层的数据也修改掉。

案例代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><input type="text" id="myinput" ><script>
    var input = document.getElementById("myinput");    
    var obj = {};    
    Object.defineProperty(obj, "input", {
        get: function () {
            return input.value;
        },
        set: function (val) {
            input.value = val;
            changeCallback(input.value);
        }
    });

    input.onkeyup = function () {
        obj.input = input.value;
    };    function changeCallback(val) {
        console.log("这里是不管view层,还是module层修改后的回调,最后设置的值是"+val);
    }</script></body></html>

思路

  • 首先,我们先使用Object.defineProperty()方法设置obj的set方法,只要修改obj的input属性,就会触发这个这个set方法,然后触发回调,这就实现了module层的数据绑定。

  • 然后,再input上绑定keyup事件,实现了view层的绑定。

  • 只要两者有一个修改,不管input的value值,还是获取obj的input属性,都是获取最新修改的值。

  • 这应该是最简单的思路了。

以上是js实现双向数据绑定的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn