cari

Rumah  >  Artikel  >  hujung hadapan web  >  js实现双向数据绑定的方法

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

一个新手
一个新手asal
2017-10-11 10:28:132276semak imbas


需求

现在的框架都讲究什么单向绑定，双向绑定的都是什么东西？
- 单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成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属性，都是获取最新修改的值。

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

Atas ialah kandungan terperinci js实现双向数据绑定的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何实现tab栏的切换效果 Artikel seterusnya：制作一个基于vue的倒计时demo

Artikel berkaitan

Lihat lagi