代码改变世界

backbone 之事件(events)

2013-04-16 20:07  掸尘  阅读(4573)  评论(2编辑  收藏  举报

  最近用 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就写到此吧