之前简单熟悉了一下，看了一两个例子，就以为已经掌握了，就停滞不前了。
直到在项目中真正用到，才知道自己是多么无知。下定决心：
首先，彻底完整看一遍手册（期间也是相当痛苦的，没有一气呵成的流畅？是不是老了？）
其次，是看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事件
有触发集合的add事件，而且是逐一取出的
而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事件
如果您觉得本文的内容对您的学习有所帮助，您可以微信：
