So implementieren Sie die bidirektionale Datenbindung in js-js-Tutorial-php.cn

So implementieren Sie die bidirektionale Datenbindung in js

一个新手

Freigeben： 2017-10-11 10:28:13

Original

2312 Leute haben es durchsucht

Anforderungen

Worauf konzentrieren sich aktuelle Frameworks bei der unidirektionalen Bindung und was ist die bidirektionale Bindung?
- Einweg-Datenbindung: Dies bedeutet, dass wir zuerst die Vorlage schreiben, dann die Vorlage und die Daten (die Daten können aus dem Hintergrund stammen) integrieren, um HTML-Code zu bilden, und diesen HTML-Code dann in den Dokumentenfluss einfügen.
- Zwei-Wege-Datenbindung: Zwei-Wege-Bindung zwischen Datenmodell (Modul) und Ansicht (Ansicht). Das heißt, unabhängig davon, ob ich die relevanten Daten des Datenmodells oder die Daten in der Ansicht ändere, werden die entsprechenden Daten entsprechend aktualisiert.

Umsetzungsprinzip

Hauptsache ist die Bindung von Ereignissen.
- Auf der Ansichtsebene (Ansicht) können Sie das Keyup-Ereignis binden, um das Datenmodell zu aktualisieren.
- Verwenden Sie die Object.defineProperty()-Methode für das Datenmodell, um die Set-Methode des Objekts zu definieren Die Einstellung der Objekteigenschaften wird ausgelöst. Ändern Sie auch die Daten in der Ansichtsebene.

Fallcode

<!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>

Nach dem Login kopieren

Idee

Zuerst verwenden wir die Methode Object.defineProperty(), um die Set-Methode von obj festzulegen modifizieren obj Das Eingabeattribut löst die Set-Methode und dann den Rückruf aus, der die Datenbindung der Modulschicht realisiert.
Binden Sie dann das Keyup-Ereignis an die Eingabe, um die Bindung der Ansichtsebene zu realisieren.
Solange es eine Änderung zwischen den beiden gibt, wird unabhängig vom Wert der Eingabe oder des Eingabeattributs von obj der zuletzt geänderte Wert erhalten.
Das dürfte die einfachste Idee sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die bidirektionale Datenbindung in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!