La liaison bidirectionnelle du cadre MVVM, c'est-à-dire que lorsque l'objet change, la valeur de l'élément DOM pertinent sera automatiquement modifié. Au contraire, lorsque l'élément DOM change, la valeur de l'objet peut être automatiquement mise à jour. Bien sûr, l'élément DOM fait généralement référence à l'élément d'entrée de sortie.
1. Premièrement, la liaison unidirectionnelle est implémentée et la fonction de rappel est déclenchée lorsque la valeur de la propriété de l'objet spécifié change.
2. La liaison unidirectionnelle peut utiliser l'implémentation de DefineProperty nouvellement ajoutée (ou DefineProperties) dans ES5. Si ES5 est utilisé, il est destiné à ne pas soutenir IE9. Afin d'éviter le problème de boucle morte récursif, l'attribut d'origine doit être coupé en un attribut privé pour enregistrer.
3. Le problème de la portée résultant de l'appel de laproperty définie pour définir les fermetures en boucle. Afin de résoudre le problème selon lequel la valeur de l'objet de variable de portée sera récupérée à la dernière valeur d'exécution, définissez une couche supplémentaire de fonction de fermeture appelée immédiatement pour passer la valeur.
4. Nous définissons les fonctions GETFN et SETFN à déclencher lorsque les propriétés sont et définissent. Sa fonction est de lire et d'écrire la propriété privée __private et de déclencher la fonction de rappel pour informer la couche d'interface utilisateur pour mettre à jour l'interface.
5. Une fois la liaison unidirectionnelle implémentée, la liaison inverse est implémentée, c'est-à-dire que la couche d'interface utilisateur Onchange déclenche les données de mise à jour. C'est relativement facile. Dans le DOM, le changement de valeur du modèle est associé à la propriété personnalisée BindKey et l'événement OnInput est surveillé. Par rapport à OnChange, l'avantage est qu'il peut changer en temps réel sans attendre de mise au point. De plus, il peut être déclenché par la collation avec le bouton droit sur le coup de fer, le collage du menu, la traînée du texte dans des zones de texte, etc., sans aucune angle mort. L'inconvénient est qu'il ne prend en charge que IE9 ou supérieur, mais il y a des effets d'on équivalent ci-dessous IE9 et peut être utilisé ou compatible.
6. Résumé: Le principe de la liaison bidirectionnelle n'est pas compliqué. Le code global ne dépasse pas 50 lignes, ce qui est très simple. Cependant, il y a encore du contenu technique. Voici le code complet. Si vous ne souhaitez pas utiliser un immense cadre, vous pouvez l'utiliser. Le IE9 suivant n'est pas pris en charge. Si vous souhaitez soutenir l'IE9 suivant, vous pouvez utiliser Avalon. Il utilise VBS pour encapsuler l'accessoire GET et définir, ce qui est assez puissant.
HTML:
<div id = "Container"> <p> Nom: <input type = "text" bindkey = "username"> </p> <p> Âge: <input type = "text" bindkey = "age"> </p> <v>
JS:
<Script Type = "Text / Javascript"> Window.Model = {Username: "Windy", Age: 34, Skill: ["JavaScript", "Html", "CSS", "jQuery", "Node"],} fonction BindingModel (modèle, ChangCallback) {var PropertiesMap = {}; modèle .__ private = {}; fonction getfn (name) {var result = this .__ private [name] console.log ("get value:" + name + "=" + result); Résultat de retour; }; fonction setfn (name, val) {if (this .__ private [name]! = val) {console.log ("set value:" + name + "=" + val); ce .__ privé [name] = val; if (changecallback) {changecallback (name, val); }}}}; pour (elem dans modèle) {if (Model.HasownProperty (elem) && elem! = "__ private" && typeof (modèle [elem])! = "function") {(function (propName, propValue) {modèle .__ private [propname] = propValue; // init value propertiesMap [proPname] = {get: function () {retour getfn.call (this, propName)}, set: function (v) {return setfn.call (this, propName, v)}, // value: modèle [elem], // withing: true, énumérable: true, configurable: true}}) (elem, modèle [elem]); }} Objet.defineProperties (modèle, propriétésMap)} Fonction BindingBoth (modèle, dom) {dom.find ("[bindkey]"). Chaque (fonction (élément) {var key = $ (this) .attr ("bindkey"); $ (this) .val (modèle [key]); $ (this) .bind ("entrée", fonction () {) {) modèle [key] = $ (this) .val ();})}); BindingModel (modèle, fonction (nom, val) {var el = dom.find ("[bindkey =" + name + "]"); if (el.val ()! = val) {el.val (val);}}); } BindingBoth (Window.Model, $ ("# conteneur")) </cript>Les principes ci-dessus et le code d'implémentation du mécanisme de liaison bidirectionnel MVVM (recommandé) sont tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.