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对象。