Maison >interface Web >js tutoriel >Comment implémenter la liaison de données bidirectionnelle dans js

Comment implémenter la liaison de données bidirectionnelle dans js

一个新手original: 2017-10-11 10:28:132315parcourir

Exigences

Quels sont les cadres actuels qui se concentrent sur la liaison unidirectionnelle et qu'est-ce que la liaison bidirectionnelle ?
- Liaison de données unidirectionnelle : cela signifie que nous écrivons d'abord le modèle, puis intégrons le modèle et les données (les données peuvent provenir de l'arrière-plan) pour former du code HTML, puis insérons ce code HTML dans le flux de documents.
- Liaison de données bidirectionnelle : Liaison bidirectionnelle entre le modèle de données (Module) et la vue (View). Autrement dit, peu importe si je modifie les données pertinentes du modèle de données ou les données de la vue, les données correspondantes seront mises à jour en conséquence.

Principe de mise en œuvre

L'essentiel est la liaison des événements.
- Sur la couche de vue (View), vous pouvez lier l'événement keyup pour mettre à jour le modèle de données
- Utilisez la méthode Object.defineProperty() sur le modèle de données pour définir la méthode set de l'objet. le paramètre de propriété de l'objet est déclenché, modifiez également les données dans la couche de vue.

Code de cas

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

Idée

Tout d'abord, nous utilisons la méthode Object.defineProperty() pour définir la méthode set d'obj Just. modifier obj L'attribut input déclenchera la méthode set, puis déclenchera le rappel, qui réalise la liaison de données de la couche module.
Ensuite, liez l'événement keyup à l'entrée pour réaliser la liaison de la couche de vue.
Tant qu'il y a une modification entre les deux, quelle que soit la valeur d'input ou l'attribut d'entrée d'obj, la dernière valeur modifiée sera obtenue.
Cela devrait être l’idée la plus simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir l'effet de commutation de la barre d'ongletsArticle suivant：Comment obtenir l'effet de commutation de la barre d'onglets

Articles Liés

Voir plus