Backbone.js之Todo源码浅析

相信每个接触了解过backbone的人都知道todo，网上的关于它的分析教程也都分析乱了。但是，知识只有自己学习领悟才是自己的，话不多说，正文开始。

在分析todo的源码之前，首先我们要知道todo具有哪些功能。todo类似于备忘录一样，其界面如下图：

1.当我们在输入框完成输入item时，按下enter键，下方会出现输入的内容item，item是一个li。

2.在所有item的最上面是一个全选checkbox。

3.每一个item是一个checkbox，当勾选任一行item时，则该行的内容会被删除线划掉，同时最下面的item left-1，Clear completed item+1。

4.当鼠标移到item上时，item的末端会出现一个删除符号，点击删除符号，该item即被删除。

简短介绍完todo的基本功能后，开始源码之旅。

todo.js整体长这个样子，如下图：

一个model，一个collection，两个view。

model详见如下：

   var Todo = Backbone.Model.extend({
     defaults: function() {
       return {
         title: "empty todo...",
         order: Todos.nextOrder(),
         done: false
       };
     },
     toggle: function() {
       this.save({done: !this.get("done")});
     }
   });

默认设置defaults，返回一个list；定义了一个toggle，该触发器会设置保存model的状态。

collection详见如下：

  var TodoList = Backbone.Collection.extend({
     model: Todo,
     localStorage: new Backbone.LocalStorage("todos-backbone"),
     done: function() {
       return this.where({done: true});
     },
     remaining: function() {
       return this.where({done: false});
     },
     nextOrder: function() {
       if (!this.length) return 1;
       return this.last().get('order') + 1;
     },
     comparator: 'order'
   });

指定集合TodoList的mode为Todo，存储方式为localStorage，同时定义了done，remaining，nextOrder三个函数，最后指定了todo的排列顺序。

TodoView详见如下：

  var TodoView = Backbone.View.extend({
     tagName:  "li",
     template: _.template($('#item-template').html()),
     events: {
       "click .toggle"   : "toggleDone",
       "dblclick .view"  : "edit",
       "click a.destroy" : "clear",
       "keypress .edit"  : "updateOnEnter",
       "blur .edit"      : "close"
     },
     initialize: function() {
       this.listenTo(this.model, 'change', this.render);
       this.listenTo(this.model, 'destroy', this.remove);
     },
     render: function() {
       this.$el.html(this.template(this.model.toJSON()));
       this.$el.toggleClass('done', this.model.get('done'));
       this.input = this.$('.edit');
       return this;
     },
     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(e) {
       if (e.keyCode == 13) this.close();
     },
     clear: function() {
       this.model.destroy();
     }
   });

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);
       this.listenTo(Todos, 'reset', this.addAll);
       this.listenTo(Todos, 'all', this.render);
       this.footer = this.$('footer');
       this.main = $('#main');
       Todos.fetch();
     },
     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});
       this.$("#todo-list").append(view.render().el);
     },
     addAll: function() {
       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');
       return false;
     },
     toggleAllComplete: function () {
       var done = this.allCheckbox.checked;
       Todos.each(function (todo) { todo.save({'done': done}); });
     }
   });