首頁 > 文章 > web前端 > js實作雙向資料綁定的方法

js實作雙向資料綁定的方法

一个新手原創: 2017-10-11 10:28:132271瀏覽

需求

現在的框架都講究什麼單向綁定，雙向綁定的都是什麼東西？
- 單向資料綁定：指的是我們先把模板寫好，然後把模板和資料（資料可能來自後台）整合到一起形成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

上一篇：如何實作tab欄的切換效果下一篇：如何實作tab欄的切換效果

看更多