jsで双方向のデータバインディングを実装する方法-jsチュートリアル-php.cn

jsで双方向のデータバインディングを実装する方法

一个新手

リリース： 2017-10-11 10:28:13

オリジナル

2322 人が閲覧しました

要件

現在のフレームワークは一方向バインディングの何を重視しており、双方向バインディングとは何ですか?
- 一方向データバインディング: 最初にテンプレートを作成し、次にテンプレートとデータ (データはバックグラウンドから取得される場合があります) を統合して HTML コードを形成し、この HTML コードをドキュメントフローに挿入することを意味します。
- 双方向データバインディング: データモデル (モジュール) とビュー (ビュー) 間の双方向バインディング。つまり、データモデルの関連データを変更するか、ビュー上のデータを変更するかに関係なく、対応するデータもそれに応じて更新されます。

実装原則

主なものはイベントのバインディングです。
- ビューレイヤー (View) で、keyup イベントをバインドしてデータモデルを更新できます。
- オブジェクトのプロパティ設定が次の場合、データモデルで Object.defineProperty() メソッドを使用してオブジェクトの set メソッドを定義します。トリガーされると、ビューレイヤのデータも変更されます。

ケースコード

<!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の入力プロパティが変更されている限り、このsetメソッドがトリガーされます。これは、モジュール層で実装されたデータバインディングです。
次に、keyupイベントを入力にバインドして、ビューレイヤーのバインディングを実現します。
input の値や obj の input 属性に関係なく、両者の間に 1 つの変更がある限り、最新の変更値が取得されます。
これが最も単純なアイデアです。

以上がjsで双方向のデータバインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。