在上一篇实现一个简陋的MVC框架 的基础上实现双向绑定
<input type="text" data-bind="age">
<input type="text" data-bind="age" disabled>
new Controller(function (model){
model.age.set(21);
});
代码:
function SubPub() {
this.value = "";
this.doms = [];
}
//类似于观察者中的publish
SubPub.prototype.set = function (value) {
var self = this;
self.value = value;
//异步更新队列
setTimeout(function () {
self.doms.forEach(function (dom) {
dom.value = value.toString();
})
},0)
}
//类似于观察者中的subscribe
SubPub.prototype.bind = function (dom) {
this.doms.push(dom);
}
function Controller(callback) {
var doms = document.querySelectorAll('[data-bind]');
var model = {};
doms.forEach(function (dom) {
var data = dom.getAttribute('data-bind');
//可能多个dom结点绑定同一变量
model[data] = model[data] || new SubPub();
model[data].bind(dom);
//增加的代码,实现双向绑定
dom.addEventListener('keyup',function () {
model[data].set(dom.value);
})
})
callback.call(this,model);
}