现在的位置: 首页 > 综合 > 正文

backbone官方例子todos分析

2014年03月29日 ⁄ 综合 ⁄ 共 2757字 ⁄ 字号 评论关闭

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是指什么具体内容?
其他的事件都是比较类似的方法。就不逐一介绍了。
上面的介绍希望对不了解的人有帮助。

抱歉!评论已关闭.