基本原理
对于Getter/Setter实现的数据双向绑定来说,核心在于重定义model的getter与setter方法,在数据变动的时候重新渲染页面。
1.监听model属性变化,当属性产生变化的时候,修改对应对应的节点内容。
function getProxyModel() {
var obj = {}
var self = this;
var model = this.model;
var model2sync = this.model2sync; //model2sync 存放模型节点
each(Object.keys(model), function(i, k) {
Object.defineProperty(obj, k, {
set: function(v) {
model[k] = v
var arr = model2sync[k];
each(arr, function() {
this.node.textContent = self.renderStr(this.raw)
})
},
get: function() {
return model[k]
}
})
})
return obj
}
2.监听事件对view的变化,当view修改后,修改对应model的数值,触发重新渲染。
// 绑定view事件
this.on(this.dom, ['keyup', 'click'], function(e) {
var name = e.target.name
if (name) {
if (e.target.value != self.model[name]) {
self.model[name] = e.target.value
}
}
})