A ligação bidirecional da estrutura MVVM, ou seja, quando o objeto muda, o valor do elemento DOM relevante será alterado automaticamente. Pelo contrário, quando o elemento DOM muda, o valor do objeto pode ser atualizado automaticamente. Obviamente, o elemento DOM geralmente se refere ao elemento de entrada de saída.
1. Primeiro, a ligação unidirecional é implementada e a função de retorno de chamada é acionada quando o valor da propriedade do objeto especificado muda.
2. A ligação unidirecional pode usar a implementação de DefineProperty recém-adicionada (ou definição) no ES5. Se o ES5 for usado, está destinado a não apoiar o IE9. Para evitar o problema de loop morto recursivo, o atributo original precisa ser cortado em um atributo privado para salvar.
3. O problema do escopo decorrente de chamadas DefineProperty para definir fechamentos em loop. Para resolver o problema de que o valor do objeto variável de escopo será recuperado para o último valor de execução, defina uma camada adicional de função de fechamento chamada imediatamente para passar o valor.
4. Definimos as funções GETFN e SETFN para acionar quando as propriedades obtêm e definem. Sua função é ler e escrever a propriedade privada __private e acionar a função de retorno de chamada para notificar a camada da interface do usuário para atualizar a interface.
5. Depois que a ligação unidirecional é implementada, a ligação reversa é implementada, ou seja, a camada da interface do usuário aciona os dados de atualização. Isso é relativamente fácil. No DOM, a alteração do valor do modelo está associada à propriedade de propriedade personalizada e o evento OnInput é monitorado. Comparado com o Ochange, a vantagem é que ele pode mudar em tempo real sem esperar por foco. Além disso, ele pode ser acionado clicando com o botão direito do mouse, colando o menu, arrastando texto para caixas de texto etc., sem pontos cegos. A desvantagem é que ele suporta apenas o IE9 ou acima, mas há o OnPropertyChange equivalente abaixo do IE9 e pode ser usado ou compatível.
6. Resumo: O princípio da ligação bidirecional não é complicado. O código geral não excede 50 linhas, o que é muito simples. No entanto, ainda há algum conteúdo técnico. A seguir, o código completo. Se você não deseja usar uma estrutura enorme, pode usá -la. O seguinte IE9 não é suportado. Se você deseja apoiar o seguinte IE9, pode usar o Avalon. Ele usa o VBS para encapsular o acessador GET e Set, que é bastante poderoso.
html:
<div id = "contêiner"> <p> Nome: <input type = "text" bindKey = "userName"> </p> <p> idade: <input type = "text" bindkey = "idade"> </p> <div>
JS:
<script type = "text/javascript"> window.model = {nome de usuário: "windy", idade: 34, habilidade: ["javascript", "html", "css", "jQuery", "node"],} function bindModel (Model, ChanGallback) {var propRtiesMap " modelo .__ privado = {}; function getfn (nome) {var resultado = this .__ private [nome] console.log ("get valor:"+nome+"="+resultado); resultado de retorno; }; função setfn (nome, val) {if (this .__ private [nome]! = val) {console.log ("set valor:"+nome+"="+val); este .__ privado [nome] = val; if (ChanGecallback) {ChanGecallback (nome, Val); }}}}; para (elem no modelo) {if (Model.HasownProperty (elem) && elem! = "__ privado" && typeof (modelo [elem])! = "function") {(function (propName, propValue) {Model .__ private [propname] = propValue; functive; getfn.call (this, propname)}, set: function (v) {return setfn.call (this, propname, v)}, // value: model [elem], // writable: true, enumerável: true, configurável: true}}) (elem, modelo [elEm]); }} Object.DefineProperties (Model, PropertiesMap)} Função BindingBoth (Model, Dom) {Dom.find ("[BindKey]"). Cada (function (item) {var key = $ (this) .attr ("BindKey"); $ (this) .val (Model [key]); modelo [key] = $ (this) .val ();})}); BindingModel (modelo, função (nome, val) {var el = dom.find ("[bindkey ="+name+"]"); if (el.val ()! = val) {el.val (val);}}}); } BindingBoth (Window.model, $ ("#contêiner")) </sCript>Os princípios e o código de implementação acima do mecanismo de ligação bidirecional MVVM (recomendado) são todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.