backbone 之事件(events)
- - 博客园_首页 最近用 backbone 做了一个项目,加深了对前端mvc理解. 一定要应用的熟练后,了解其思想后,再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event. backbone的event 是其核心. 当我们user调用create 就会触发change事件.
最近用 backbone 做了一个项目,加深了对前端mvc理解。同时也很多的收获。纠正了我对阅读源码的认识。一定要应用的熟练后,了解其思想后,再去阅读源码!千万不要本末倒置。想写写自己对backbone的感悟!接下来第一步就是backbone的event。
backbone的event 是其核心。是model和view的纽带。了解event 是必要的。
举个例子:
var User = function(name) {
this.name = name;
}
User.records = [];
User.bind = function(ev, callback) {
var calls = this._callbacks || (this._callbacks = {});
(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
}
User.trigger = function(ev) {
var list, calls, i, l;
if (!(calls =this._callbacks)) return this;
if (!(list = this._callbacks[ev])) return this;
$.each(list, function(){this.apply(this())})
}
User.bind('change', function(){
alert('dddd');
});
User.create = function(name){
this.records.push(new this(name));
this.trigger('change');
}
User.create('liuzhang');
当我们user调用create 就会触发change事件。其实backbone events也一样的思路,比如model 改变会触发change事件。collections 添加会触发add事件。
只要继承backbone 的Events 对象,对象就拥有了on,off。trigger等能力!比如文档上
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
alert("Triggered " + msg);
});
object.trigger("alert", "an event");
上述的obejct 就可以添加了一些事件和回调,非常方便的。你可以翻翻backbone的源码看到
_.extend(Model.prototype, Events, {});
_.extend(Collection.prototype, Events, {})
_.extend(View.prototype, Events, {});
model,view ,collection 都继承了events
backbone内置事件写的很优雅。实现很强大的功能!ok就写到此吧