Backbone的监听事件

作者：zccst

之前简单熟悉了一下，看了一两个例子，就以为已经掌握了，就停滞不前了。

直到在项目中真正用到，才知道自己是多么无知。下定决心：
首先，彻底完整看一遍手册（期间也是相当痛苦的，没有一气呵成的流畅？是不是老了？）
其次，是看Todo实例。

当我一点点录入，并在TodoView和Appview的render方法中分别console.log(xx)过程中才有那么一点点进步。

下面就记录对backbone逐渐深入的理解：

backbone本身的结构并不难理解，分别是（根据Todo实例）

//模型
var model = Backbone.Model.extend({
    validate:function(){}
});
//集合
var Collect = Backbone.Collection.extend({
    model : model,
    comparator:function(){},//比较器，方便model排序
    method1:function(){},
    method2:function(){}
});
var lists = new Collect;//创建集合对象

//某一个元素视图
var itemView = Backbone.View.extend({
    tagName:"li",
    template:_.template($("#xx").html()),
    events:{
        "click #edit":edit,
        "click #del":del
    },
    initialize:function(){//初始化：绑定dom元素，监听事件等
        this.listenTo(this.model, "change", render);
        this.listenTo(this.model, "destroy", this.remove);//直接删除DOM节点
    },
    render:{
        //渲染当前item
        return this;//在页面渲染时会用到
    },
    edit:function(){},
    del:function(){}
});
//页面视图
var AppView = Backbone.View.extend({
    el:$("#"),//
    template:_.template($("#xx").html()),
    events:{
        "click #create":createOnEnter,
    },
    initialize:function(){//初始化：绑定dom元素，监听事件等
        this.listenTo(lists, 'add', addOne);
        this.listenTo(lists, '', method1);
        this.listenTo(lists, '', method2);
    },
    render:{
        //渲染除item外的其他部分
    },
    createOnEnter:function(e){//events中绑定的，参数是event
        lists.create({keyName:value});//触发Collection的add事件
    },
    addOne:function(model){//initialize中绑定的，参数是model
        var view = new itemView(model:model);
        this.$el.append(view.render().el);//相当于是itemView渲染后的el。
    },
    method1:function(){},
    method2:function(){}
});

然而上面的逻辑并不难理解，较难的是集合和模型在增删查改时触发的事件，这使我眼花缭乱，特别是all。


比如：较难理解的几个事件：
1，Todos.fetch()方法到底做了什么？
经验证：
没有触发集合change事件
没有触发集合reset事件
没有触发集合remove事件
[color=red]有触发集合的add事件，而且是逐一取出的[/color]
而add在AppView的initialize里监听了两次。一次是渲染AppView的addOne（逐个加载每一个item），另一次是渲染AppView的render（逐次计算done和remaining）

推理：也没有触发model的change和destroy事件。

2，勾选TodoView中的checkbox事件
由于调用了model的save()方法，所以触发了Collection的change（由于change绑定TodoView的render，所以会重新渲染）

由于model发生了变化，Collection也相应感知，所以也触发了Collection的change事件（由于change绑定AppView的render，所以会重新渲染）


3，删除TodoView中的li
this.model.destroy();//从model中销毁

触发destroy事件
this.listenTo(this.model, 'destroy', this.remove);//删除DOM节点，自己消失

从model中销毁又关联触发Collection的remove事件
this.listenTo(Todos, 'remove', this.render);//底部统计计算

4，创建一个新的
Todos.create({title:this.input.val()});

触发Collection的add事件，调用addOne（带着item，添加到页面）和AppView的render（底部渲染后）

model增加，再触发itemView的change事件，调用render。

集合增加，再触发AppView的change事件，调用render。


5，全部删除
_.invoke(Todos.done(), 'destroy');//清除所有被选中的（done:true的）
var arr = Todos.done();for(var item in arr){ arr[item].destroy(); };

首先，model物理删除。
触发model的destroy事件，remove当前Dom节点
冒泡触发Collection的remove事件，调用render（计算底部统计）。


6，全选
var done = this.allCheckbox.checked;
Todos.each(function(todo){ todo.save({'done':done}); });

依次save每一个model，监听change事件，调用TodoView的render方法
model的change传感给Collection的change事件，调用AppView的render方法。


下面的总结相当于是手册，供忘记时查询：

监听model事件有：

change：set  （如果修改了model状态时触发）
	unset  去除某个属性 
	clear  去除全部属性      
	save （保存新的属性值时触发）如果只保存改变的属性{attrs:{patch:true}}
	fetch（当服务器端与当前不一致时触发）
destroy：destroy方法触发destroy事件后，会继续冒泡至Collection的remove事件

监听Collection事件有：

add    : fetch(新增时), set(新增时), add({merge:true}时), create
change : fetch(修改时), set(修改时), add
remove : fetch(删除时), set(model被删时), remove
reset  : reset
/*
批注1：add只有在{merge:true}才会触发change事件
批注2：fetch会“智能”合并，除非你设置{merge:false}，此时会reset
     后端新增时，fetch才触发add事件
     后端修改时，fetch才触发change事件
     fetch({remove:false})不移除，{remove:true}时才触发remove事件
批注3：set可以通过{add:false},{remove:false},{merge:false}使不触发对应事件*/

//特殊事件 "all"  会在任意事件发生时被触发
all

AppView中initialize的add, change, remove 加起来基本可以相当于all事件了。

reset的使用场景：
1，调用fetch()方法时加了{reset:true}时触发reset事件
2，直接reset({...});时触发reset事件


与之同时，两者之前的关系是：

model的change事件都会引起Collection的change事件。
model的destroy事件会引起Collection的remove事件。

批注：两者引起是不交叉的
model的change不会引起Collection的remove事件
model的destroy不会引起Collection的change事件


如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]