backbonetodo案例分析

1 var Todo &＃61; Backbone.Model.extend({
2 defaults : function() { //看好多人都用function return这种方式&＃xff0c;但不知道好处在哪
3 return {
4 title : "empty todo ...",
5 order : Todos.nextOrder(), //要有Todos这个全局变量才行
6 done : false
7 }
8 },
9 //切换状态
10 toggle : function(){
11 this.save({done : !this.get("done")}); //注意&＃xff1a;我在这里犯过2次错误&＃xff0c;把save写成了set&＃xff0c;导致数据保存不上。
12 }, //更新数据要使用 save&＃xff0c;不是其他。RESTful风格就是这样。
13 });

1 var TodoList &＃61; Backbone.Collection.extend({
2 //model
3 model : Todo, //如java中List集合中的泛型&＃xff0c;表面这是一个Todo类型的集合(即集合存储Todo对象)
4
5 //本地存储&＃xff0c;操作的数据都存储在localStorage里面&＃xff0c;没有后端
6 localStorage : new Backbone.LocalStorage("todos-backbone"),
7 //The app uses a LocalStorage adapter to transparently save all of your todos within your browser, instead of sending them to a server
8
9 //获取状态为 done:true 的Todo对象数组
10 done : function(){
11 return this.where({done : true});
12 },
13 //获取状态为 done:false 的Todo对象数组
14 remaining : function(){
15 return this.where({done : false});
16 },
17
18 //生成下一个Todo对象的编号
19 nextOrder : function(){
20 if(!this.length){ //this.length 获取集合中model的数量
21 return 1;
22 }
23 return this.last().get("order") &＃43; 1;
24 },
25
26 comparator : "order" , //按照 order 进行排序
27
28 });

1 var TodoView &＃61; Backbone.View.extend({
2
3 tagName : "li",
4
5 template : _.template($("#item-template").html()), //页面模板&＃xff0c;_.template是underScore的函数
6
7 events : { //DOM事件
8 "click .toggle" : "toggleDone",
9 "dblclick .view" : "edit",
10 "click a.destroy" : "clear",
11 "keypress .edit" : "updateOnEnter",
12 "blur .edit" : "close",
13 },
14
15 initialize : function(){ //构造函数
16 //监听Collection的变化并作出反应
17 this.listenTo(this.model, "change", this.render); //model属性改变时会触发该事件
18 this.listenTo(this.model, "destroy", this.remove); //销毁model时&＃xff0c;触发该事件。this.remove()移除一个视图(即销毁model的同时移除view)
19 },
20
21 //渲染
22 render : function(){
23 // el是tagName
24 this.$el.html(this.template(this.model.toJSON())); //将model的属性作为参数传入模板生成html代码&＃xff0c;同时填充到el元素里
25
26 this.$el.toggleClass("done", this.model.get("done"));//根据model的属性值来判断元素的类
27
28 this.input &＃61; this.$(".edit"); //注意这个写法
29
30 return this; //为了链式调用
31 },
32
33 /*** DOM事件处理函数 ***/
34
35 //切换状态
36 toggleDone : function(){
37 this.model.toggle();
38 },
39
40 edit : function(){
41 this.$el.addClass("editing");
42 this.input.focus();
43 },
44
45 close : function(){
46 var value &＃61; this.input.val();
47 if(!value){
48 this.clear();
49 }else{
50 this.model.save({title : value});
51 this.$el.removeClass("editing");
52 }
53
54 },
55
56 updateOnEnter : function(){
57 if(e.keyCode &＃61;&＃61;&＃61; 13){
58 this.close();
59 }
60 },
61
62 clear : function(){
63 this.model.destroy(); //销毁model&＃xff0c;触发destroy事件
64 },
65
66 });

1 var AppView &＃61; Backbone.View.extend({
2
3 el : $("#todoapp"),
4
5 statsTemplate : _.template($("#stats-template").html()),
6
7 events : {
8 "keypress #new-todo" : "createOnEnter",
9 "click #clear-completed": "clearCompleted",
10 "click #toggle-all" : "toggleAllComplete",
11 },
12
13 initialize : function(){
14 this.input &＃61; this.$("#new-todo");
15 this.allCheckbox &＃61; this.$("#toggle-all")[0];
16
17 this.listenTo(Todos, "add", this.addOne); //当有Todo对象添加到Todos集合触发该事件&＃xff08;添加一个model就添加一个view&＃xff09;
18 // this.listenTo(Todos, "reset", this.addAll); //
19 this.listenTo(Todos, "all", this.render); //任何事件的发生都会调用该回调函数this.render
20
21 this.footer &＃61; this.$("footer");
22 this.main &＃61; this.$("#main");
23
24 Todos.fetch(); //拉取所有的Model对象并保存到Todos集合中&＃xff0c;会触发Todos的add事件
25 },
26
27 render : function(){
28 var done &＃61; Todos.done().length;
29 var remaining &＃61; Todos.remaining().length;
30
31 if(Todos.length){
32 this.main.show();
33 this.footer.show();
34 this.footer.html(this.statsTemplate({done : done, remaining : remaining}));
35 }else{
36 this.main.hide();
37 this.footer.hide();
38 }
39 this.allCheckbox.checked &＃61; !remaining;
40 },
41
42 addOne : function(todo){
43 var view &＃61; new TodoView({model : todo});
44 view.render();
45 this.$("#todo-list").append(view.el);
46 },
47 /**
48 addAll : function(){
49 //backbone代理了Underscore的一些方法
50 Todos.each(this.addOne, this);
51 },
52 **/
53 createOnEnter : function(e){
54 if(e.keyCode !&＃61; 13){
55 return;
56 }
57 if(!this.input.val()){
58 return;
59 }
60 Todos.create({title : this.input.val()});
61 this.input.val("");
62 },
63
64 clearCompleted : function(){
65 //_.invoke(Todos.done(), "destroy"); //遍历Todos.done()&＃xff0c;每个元素都 todo.destroy();
66
67 _.each(Todos.done(),function(todo){
68 todo.destroy();
69 });
70 return false;
71 },
72
73 toggleAllComplete : function(){
74 var done &＃61; this.allCheckbox.checked;
75 Todos.each(function(todo){
76 todo.save({
77 &＃39;done&＃39; : done,
78 });
79 });
80 },
81
82 });

1 <header>
2　　<h1>Todosh1>
3　　<input id&＃61;"new-todo" type&＃61;"text" placeholder&＃61;"What needs to be done?">
4header>

1 <section id&＃61;"main">
2 <input id&＃61;"toggle-all" type&＃61;"checkbox">
3 <label for&＃61;"toggle-all">Mark all as completelabel>
4 <ul id&＃61;"todo-list">
5 ul>
6 section>

1 <footer>
2 <a id&＃61;"clear-completed">Clear completeda>
3 <div id&＃61;"todo-count">div>
4 footer>