backbone-todo案例分析

todo案例可以到这个地址下载 https://github.com/jashkenas/backbone

添加数据后

todo案例不涉及Router，仅有Model、Collection、View的应用，但这个案例对于这三个对象的使用真是已经到了炉火纯青的地步，我看了两天（囧），也只是看懂了表面一层，至于更深一层的思想就太模糊、若有若无了。还需努力啊！

todo案例的核心在todos.js文件里，我分析的也是todos.js。

首先是数据模型Model

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

这个Model和java中的bean何其相似啊！属性有：title、order、done，方法有 toggle，这个方法也仅仅是更新其中的一个属性而已。

然后是集合Collection

 var TodoList = Backbone.Collection.extend({
     //model
     model : Todo,    //如java中List集合中的泛型，表面这是一个Todo类型的集合(即集合存储Todo对象)

     //本地存储，操作的数据都存储在localStorage里面，没有后端
     localStorage : new Backbone.LocalStorage("todos-backbone"),
     //The app uses a LocalStorage adapter to transparently save all of your todos within your browser, instead of sending them to a server

     //获取状态为 done:true 的Todo对象数组
     done : function(){
         return this.where({done : true});
     },
     //获取状态为 done:false 的Todo对象数组
     remaining : function(){
         return this.where({done : false});
     },

     //生成下一个Todo对象的编号
     nextOrder : function(){
         if(!this.length){    //this.length 获取集合中model的数量
             return 1;
         }
         return this.last().get("order") + 1;
     },

     comparator : "order" , //按照 order 进行排序

 });

总体来说，这个TodoList集合用来存储Todo对象到localStorage里并为他们编号，同时获取不同状态下的Todo对象。

小结：Model 和 Collection 都是用来存储数据的，里面的操作也都是对数据的操作，不与页面逻辑混合。

接下来是TodoView

 1 var TodoView = Backbone.View.extend({

     tagName : "li",    

     template : _.template($("#item-template").html()),        //页面模板，_.template是underScore的函数

     events : {                                                //DOM事件
         "click .toggle"     : "toggleDone",
         "dblclick .view"     : "edit",
         "click a.destroy"    : "clear",
         "keypress .edit"    : "updateOnEnter",
         "blur .edit"        : "close",
     },

     initialize : function(){                                //构造函数
         //监听Collection的变化并作出反应
         this.listenTo(this.model, "change", this.render);    //model属性改变时会触发该事件
         this.listenTo(this.model, "destroy", this.remove);   //销毁model时，触发该事件。this.remove()移除一个视图(即销毁model的同时移除view)
     },

     //渲染
     render : function(){
             // el是tagName
         this.$el.html(this.template(this.model.toJSON()));    //将model的属性作为参数传入模板生成html代码，同时填充到el元素里

         this.$el.toggleClass("done", this.model.get("done"));//根据model的属性值来判断元素的类

         this.input = this.$(".edit");        //注意这个写法

         return this;        //为了链式调用
     },

     /*** DOM事件处理函数 ***/

     //切换状态
     toggleDone : function(){
         this.model.toggle();
     },

     edit : function(){
         this.$el.addClass("editing");
         this.input.focus();
     },

     close : function(){
         var value = this.input.val();
         if(!value){
             this.clear();
         }else{
             this.model.save({title : value});
             this.$el.removeClass("editing");
         }

     },

     updateOnEnter : function(){
         if(e.keyCode === 13){
             this.close();
         }
     },

     clear : function(){
         this.model.destroy();    //销毁model，触发destroy事件
     },

 });

每个View视图都有一个DOM元素，这个DOM元素就是el，这个view里所有关于页面的操作都必须在el下(注意，在view操作el的父元素或同级元素都将无效)，如果没有指定el，那么el将从tagName、className、id创建，如果也没有，那么el就是一个空的div。

TodoView视图表示的就是ul中的一个li，如

写view的思路：

　　1、 el，这是一个view的根元素

　　2、template，这是view的模板，该模板将在render插入到el元素中

　　3、render，渲染页面，负责将model的数据显示在html模板中

　　4、DOM事件，想象该view哪些地方需要和用户进行交互，然后在events中绑定事件

　　5、完成DOM事件处理函数

　　6、观察哪些操作造成了哪些数据的变化，为这些数据绑定事件，当数据变化时更新数据并再次渲染页面。

比如上面的TodoView，el是li，模板渲染需要Todo数据，在这个li里，要有

• 单击checkbox，更新model数据
• 单击li后面的X号，删除model
• 双击li，变成编辑状态
  • 回车或者焦点离开更新model数据

我自己的感觉，前5个步骤都比较简单，就是第6步用起来有些生涩。不过多几次就好了！

最后是AppView

 var AppView = Backbone.View.extend({

     el : $("#todoapp"),

     statsTemplate : _.template($("#stats-template").html()),

     events : {
         "keypress #new-todo"    : "createOnEnter",
         "click #clear-completed": "clearCompleted",
         "click #toggle-all"        : "toggleAllComplete",
     },

     initialize : function(){
         this.input = this.$("#new-todo");
         this.allCheckbox = this.$("#toggle-all")[0];

         this.listenTo(Todos, "add", this.addOne);     //当有Todo对象添加到Todos集合触发该事件（添加一个model就添加一个view）
     //    this.listenTo(Todos, "reset", this.addAll); //
         this.listenTo(Todos, "all", this.render);     //任何事件的发生都会调用该回调函数this.render

         this.footer = this.$("footer");
         this.main = this.$("#main");

         Todos.fetch();    //拉取所有的Model对象并保存到Todos集合中，会触发Todos的add事件
     },

     render : function(){
         var done = Todos.done().length;
         var remaining = Todos.remaining().length;

         if(Todos.length){
             this.main.show();
             this.footer.show();
             this.footer.html(this.statsTemplate({done : done, remaining : remaining}));
         }else{
             this.main.hide();
             this.footer.hide();
         }
         this.allCheckbox.checked = !remaining;
     },

     addOne : function(todo){
         var view = new TodoView({model : todo});
         view.render();
         this.$("#todo-list").append(view.el);
     },
 /**
     addAll : function(){
         //backbone代理了Underscore的一些方法
         Todos.each(this.addOne, this);
     },
 **/
     createOnEnter : function(e){
         if(e.keyCode != 13){
             return;
         }
         if(!this.input.val()){
             return;
         }
         Todos.create({title : this.input.val()});
         this.input.val("");
     },

     clearCompleted : function(){
         //_.invoke(Todos.done(), "destroy");    //遍历Todos.done()，每个元素都 todo.destroy();

         _.each(Todos.done(),function(todo){
             todo.destroy();
         });
         return false;
     },

     toggleAllComplete : function(){
         var done = this.allCheckbox.checked;
         Todos.each(function(todo){
             todo.save({
                 'done' : done,
             });
         });
     },

 });

这个view表示整个页面，比较复杂（自己觉得）。

将它从上到下拆分开来，就变的简单了。

最上面是头，一个标题和一个输入框，输入框有一个DOM事件keypress。

 <header>
2　　<h1>Todos</h1>
3　　<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>

中间是身体，一个复选框一个label提示信息一个ul列表，复选框有一个DOM事件，而ul列表中li子项则是作为TodoView存在的。

 <section id="main">
     <input id="toggle-all" type="checkbox">
     <label for="toggle-all">Mark all as complete</label>
     <ul id="todo-list">
     </ul>
 </section>

最下是脚，一个div显示信息一个超链接，超链接有一个DOM事件，清除完成的任务。

 <footer>
     <a id="clear-completed">Clear completed</a>
     <div id="todo-count"></div>
 </footer>

这样在去看AppView就简单多了。

关键还是内在的思想，可以偶还没看明白！ >_<

---------------------------------

AppView的数据核心就是 TodoList，TodoList对象的变化要同步到AppView，所有要监听TodoList对象。