La unión bidireccional del marco MVVM, es decir, cuando el objeto cambia, el valor del elemento DOM relevante cambiará automáticamente. Por el contrario, cuando cambia el elemento DOM, el valor del objeto se puede actualizar automáticamente. Por supuesto, el elemento DOM generalmente se refiere al elemento de entrada de salida.
1. Primero, se implementa la unión unidireccional y la función de devolución de llamada se activa cuando cambia el valor de la propiedad del objeto especificado.
2. La unión unidireccional puede usar la implementación DefineProperty recientemente agregada (o DefineProperties) en ES5. Si se usa ES5, está destinado a no admitir IE9. Para evitar el problema recursivo de bucle muerto, el atributo original debe cortarse en un atributo privado para ahorrar.
3. El problema del alcance que surge de llamar a la propertia Definir para definir los cierres en el bucle. Para resolver el problema de que el valor del objeto variable de alcance se recuperará al último valor de ejecución, defina una capa adicional de función de cierre llamada inmediatamente para pasar el valor.
4. Definimos las funciones GETFN y SETFN para activar cuando las propiedades se obtienen y se establecen. Su función es leer y escribir la propiedad privada __pivar y activar la función de devolución de llamada para notificar a la capa UI para actualizar la interfaz.
5. Después de implementar la unión unidireccional, se implementa la unión inversa, es decir, la capa de interfaz de usuario que se trata de los datos de actualización. Esto es relativamente fácil. En el DOM, el cambio de valor del modelo está asociado con la propiedad personalizada BindKey, y se monitorea el evento OnInput. En comparación con OnChange, la ventaja es que puede cambiar en tiempo real sin esperar fuera de foco. Además, se puede activar al hacer clic con el botón derecho en el pegado, el menú pegado, arrastrar texto a cuadros de texto, etc., sin puntos ciegos en absoluto. La desventaja es que solo admite IE9 o superior, pero hay un cambio equivalente por debajo de IE9 y se puede usar o compatible.
6. Resumen: El principio de la unión bidireccional no es complicado. El código general no excede las 50 líneas, lo cual es muy simple. Sin embargo, todavía hay algún contenido técnico. El siguiente es el código completo. Si no desea usar un marco enorme, puede usarlo. El siguiente IE9 no es compatible. Si desea admitir el siguiente IE9, puede usar Avalon. Utiliza VBS para encapsular el accesor Get y Set, que es bastante poderoso.
HTML:
<div id = "contenedor"> <p> name: <input type = "text" bindkey = "username"> </p> <p> a age: <input type = "text" bindkey = "edad"> </p> <div>
JS:
<script type = "text/javaScript"> window.model = {username: "windy", edad: 34, habilidad: ["javascript", "html", "css", "jquery", "nodo"],} function bindingModel (modelo, cambio de cambio) {var propiedadesmap = {}; modelo .__ private = {}; function getFn (name) {var result = this .__ private [name] console.log ("get value:"+name+"="+resultado); resultado de retorno; }; function setfn (name, val) {if (this .__ private [name]! = val) {console.log ("set value:"+name+"="+val); este .__ privado [nombre] = val; if (ChangeCallback) {Changecallback (nombre, val); }}}}; para (elem en modelo) {if (model.hasownproperty (elem) && elem! = "__ private" && typeOf (model [elem])! = "function") {(function (propName, propvalue) {model .__ private [propvalue; // init PropertiesMapMap [propName] = {get: function () getfn.call (this, propname)}, set: function (v) {return setfn.call (this, propname, v)}, // valor: modelo [elem], // witable: true, enumerable: true, configurable: true}}) (elem, modelo [elem]); }} Object.defineProperties (modelo, propiedadesmap)} función bindingboth (modelo, dom) {dom.find ("[bindkey]"). Cada (función (item) {var key = $ (this) .attr ("bindkey"); $ (this) .val (modelo [clave]); $ (this) .bind ("entrada", function () {) {) modelo [clave] = $ (this) .val (); BindingModel (modelo, función (nombre, val) {var el = dom.find ("[bindkey ="+name+"]"); if (el.val ()! = val) {el.val (val);}}); } BindingBoth (Window.Model, $ ("#Container")) </script>Los principios anteriores y el código de implementación del mecanismo de enlace bidireccional MVVM (recomendado) son todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.