Двухстороннее привязка структуры MVVM, то есть при изменении объекта, значение соответствующего элемента DOM будет автоматически изменено. Напротив, когда элемент DOM изменяется, значение объекта может быть автоматически обновлено. Конечно, элемент DOM обычно относится к выходному входному элементу.
1. Во-первых, привязка одностороннего движения реализована, и функция обратного вызова запускается при изменении значения свойства указанного объекта.
2. Одностороннее привязка может использовать вновь добавленную реализацию DefineProperty (или DefineProperties) в ES5. Если используется ES5, ему суждено не поддерживать IE9. Чтобы предотвратить проблему рекурсивной мертвой петли, исходный атрибут необходимо разрешить в личный атрибут для сохранения.
3. Проблема сфера, возникающая в результате вызова DefineProperty для определения закрытия в цикле. Чтобы решить проблему, что значение объекта переменной области будет извлечено до последнего значения выполнения, определите дополнительный слой функции закрытия, вызванный немедленно для передачи значения.
4. Мы определяем функции getFN и setFN для запуска, когда свойства получают и устанавливают. Его функция состоит в том, чтобы прочитать и написать частное свойство __private и запустить функцию обратного вызова, чтобы уведомить уровень пользовательского интерфейса для обновления интерфейса.
5. После реализации одностороннего привязки реализовано обратное привязка, то есть слой пользовательского интерфейса запускает данные обновления. Это относительно просто. В DOM изменение значения модели связано с пользовательским свойством BindKey, и контролируется событие OniNPUT. По сравнению с Onchange преимущество в том, что он может измениться в режиме реального времени, не ожидая вне фокуса. Более того, это может быть вызвано с помощью правой кнопкой мыши, вставки, вставки меню, перетаскивания текста в текстовые поля и т. Д., без слепых пятен вообще. Недостаток заключается в том, что он поддерживает только IE9 или выше, но есть эквивалентные на пропертиханге ниже IE9 и могут быть использованы или совместимы.
6. Резюме: принцип двустороннего связывания не является сложным. Общий код не превышает 50 строк, что очень просто. Тем не менее, все еще есть некоторый технический контент. Ниже приведен полный код. Если вы не хотите использовать огромную структуру, вы можете использовать его. Следующий IE9 не поддерживается. Если вы хотите поддержать следующий IE9, вы можете использовать Avalon. Он использует VBS для инкапсуляции доступа GET и SET, что является довольно мощным.
HTML:
<div id = "container"> <p> Имя: <input type = "text" bindkey = "username"> </p> <p> Возраст: <input type = "text" bindkey = "age"> </p> <div>
JS:
<script type = "text/javascript"> window.model = {username: "Windy", возраст: 34, навык: ["javascript", "html", "css", "jquery", "node"],} function bindingmodel (model, Changecallback) {var propertiesmap = {}; модель .__ private = {}; function getfn (name) {var result = this .__ private [name] console.log ("get value:"+name+"="+result); результат возврата; }; функция setfn (name, val) {if (this .__ private [name]! = val) {console.log ("set value:"+name+"="+val); это .__ Private [name] = val; if (ChangeCallback) {ChangeCallback (name, val); }}}}; for (elem in model) {if (model.hasownproperty (elem) && elem! = "__ private" && typeof (model [elem])! = "function") {(функция (Propname, Propvalue) {model .__ private [propname] = propvalue; // vicate value -map [propname] = {get: fund (). getfn.call (this, propname)}, set: function (v) {return setfn.call (this, propname, v)}, // значение: model [elem], // writeble: true, перечисляется: true, настраивается: true}}) (elem, model [elem]); }} Object.defineProperties (model, PropertiesMap)} function bindingBoth (model, dom) {dom.find ("[bindKey]"). Каждый (функция (item) {var key = $ (this) .attr ("bindkey"); $ (this) .val (model [key]); $ (this). модель [Key] = $ (this) .val (); BindingModel (model, function (name, val) {var el = dom.find ("[bindkey ="+name+"]"); if (el.val ()! = val) {el.val (val);}}); } bidingboth (window.model, $ ("#intecurer")) </script>Приведенные выше принципы и код реализации двухстороннего механизма привязки MVVM (рекомендуется)-это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.