suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die bidirektionale Datenbindung in js

So implementieren Sie die bidirektionale Datenbindung in js

一个新手
一个新手Original
2017-10-11 10:28:132276Durchsuche


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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erzielen Sie den Umschalteffekt der Tab-LeisteNächster Artikel：So erzielen Sie den Umschalteffekt der Tab-Leiste

In Verbindung stehende Artikel

Mehr sehen