backbone官方例子todos分析

原文链接：http://blog.csdn.net/zhulinu/article/details/7488885 感谢

backbone是javascript当中比较有名的mvc框架，最近更新也比较快，影响力也越来越大了。不过中文资料不太多。
api中文参考文档：http://www.csser.com/tools/backbone/backbone.js.html，是老版本的，可以参考
api英文参考文档：http://documentcloud.github.com/backbone/
几个不错的中文文档，不过比较零散。
http://weakfi.iteye.com/blog/1391990
http://blog.csdn.net/soasme/article/details/6581029
http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
这个系列Backbone.js入门学习笔记目录，感觉不错，比较系统对学backbone很有帮助，想学的人可以多看看。
http://www.the5fire.net/backbone-tutorials-catalogue.html


下面的内容主要讲todos的例子，在Backbone.js入门也有介绍，只是有些地方感觉没有讲清楚，就在这里补充一下。
官方网站：http://documentcloud.github.com/backbone/examples/todos/index.html
我按照程序的数据流来介绍，具体代码就直接看网站的代码了。


1、界面刷新的分析
入口的触发是，进入页面或者刷新页面，入口代码为：
var App = new AppView;
在这里创建了一个View类。
在创建这个类后，进行了一些初始化的动作。
主要是属性和默认函数的绑定，initialize类似于构造函数。
initialize: function() {
this.input = this.$("#new-todo");
this.allCheckbox =this.$("#toggle-all")[0];
Todos.bind('add',this.addOne,this);
Todos.bind('reset',this.addAll,this);//关键语句
Todos.bind('all',this.render,this);
this.footer = this.$('footer');
this.main = $('#main');
Todos.fetch(); //关键语句
},
Todos.bind('all'，这个是绑定到特殊事件 "all" 的回调函数，它会在任意事件发生时被触发，其第一个参数为事件的名称。
这里有个关键的语句是。Todos.fetch();
在backbone中有个约定就是。collection在fetch到数据之后，会调用reset方法，所以你需要在collection中定义reset方法或者是绑定reset方法。
所以在调用完Todos.fetch()后会触发reset事件，而reset事件是绑定在addAll函数中的。所以会调用addAll方法。
// Add all items in the **Todos** collection at once.
addAll: function() {
Todos.each(this.addOne);
},
addOne: function(todo) {
var view = new TodoView({model: todo});//new TodoView，模型为todo
this.$("#todo-list").append(view.render().el);
},


addAll方法会调用addOne方法。
注意addOne的两句话。这里有个比较重要的内容就是参数，我的理解是Todos.each中调用的参数有两个，一个是Todos的model集合，然后对集合中的每个数据调用方法addOne。addOne的参数（todo）就是Todos集合中的每一个model实例。
第一句话就是创建一个view对象，第二句话就是把view对象中的html片段追加到$("#todo-list").中。
到这一步为止，从刷新界面到展示界面就全部完成了。


2、增加一条数据的分析
创建一条数据是在输入框里面输入完数据后按回车，相应的事件为createOnEnter是AppView绑定的一个方法。
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
感觉这种写法还是比较方便和直观的。
createOnEnter: function(e) {
if (e.keyCode !=13)return;
if (!this.input.val())return;
Todos.create({title:this.input.val()});
this.input.val('');
},
这个方法主要的语句是Todos.create({title:this.input.val()});
这句话的作用是在集合中添加一个Model数据对象，这里有个比较重要的backbone的约定是：当集合调用create后会会触发add事件。
而add事件的绑定关系为
Todos.bind('add',this.addOne,this);
Todos.bind('reset',this.addAll,this);//关键语句
Todos.bind('all',this.render,this);
所以就会调用addOne方法。这个方法之前介绍过了。但有个疑问就是参数是如何绑定的，当然知道参数就是在页面上输入的对话框所对应的model对象。
我感觉从java或者c++等语言转过来看javascript代码我感觉比较迷惑的就是对参数的理解。
执行完addOne事件后会触发appView的render方法，因为all事件绑定在rander方法上。中间还会调用todoView的render事件，触发的时机是在todoView中绑定的事件
initialize: function() {
this.model.bind('change',this.render,this);
this.model.bind('destroy',this.remove,this);
},
这里还有个疑问就是完成todoView的render事件后还要调用两次appView的render方法，也许是all事件触发。但还是不太理解all是指什么具体内容？
其他的事件都是比较类似的方法。就不逐一介绍了。
上面的介绍希望对不了解的人有帮助。