todo学习体会--by黄怀毅

author:huanghuaiyi 

co-author:xiaochaowei

首先介绍一下todos的功能:

1、添加任务。
2、修改任务（包括内容，状态）。
3、删除任务。

todos是典型的mvc结构。下面我将具体分析一下。

MODEL:

首先看一下model层代码：

  // Todo Model
  // ----------

  // Our basic **Todo** model has `title`, `order`, and `done` attributes.
  var Todo = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
        title: "empty todo...",
        order: Todos.nextOrder(),
        done: false
      };
    },

    // Toggle the `done` state of this todo item.
    toggle: function() {
      this.save({done: !this.get("done")});
    }

  });

上面的代码很容易理解。首先设定了titile，done两个属性，还有一个order方法，toggle是保存done状态的。

Collection

 

// Todo Collection
  // ---------------

  // The collection of todos is backed by *localStorage* instead of a remote
  // server.
  var TodoList = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: Todo,

    // Save all of the todo items under the `"todos-backbone"` namespace.
    localStorage: new Backbone.LocalStorage("todos-backbone"),

    // Filter down the list of all todo items that are finished.
    done: function() {
      return this.where({done: true});
    },

    // Filter down the list to only todo items that are still not finished.
    remaining: function() {
      return this.where({done: false});
    },

    // We keep the Todos in sequential order, despite being saved by unordered
    // GUID in the database. This generates the next order number for new items.
    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    // Todos are sorted by their original insertion order.
    comparator: 'order'

  });

  // Create our global collection of **Todos**.

Collection就是一个类似于list的东西。可以理解为arrarylist。他的类型就是其中model属性制定的Todo,然后就是done,remaining,nextOrder，comparator等方法。分别解解释一下其中的方法：

loacolStorage：将todo-backbone储层到本地

done:获取已经完成任务的

remaining：获取没有完成任务的

nextOrder：获取当前插入的编号。

comparator:内置函数，用于给backbone排序。参数是以order排序。

View:
todo的核心就是数据和view的分离。下面我分析一下：
todo最精彩的部分就是拥有了两个view

var TodoView = Backbone.View.extend

var AppView = Backbone.View.extend({

其中TodoView是Dom节点的绑定，插入等操作，后面的view是最顶端的view，是对整体的一个控制。

上面的代码如果对于看过了Backbone的人理解应该不能。

我主要想讲一下todo整体的流程。

首先网页加载的入口就是 

 var App = new AppView;

实例化之后就会调用构造函数，以及绑定事件到todos上，具体如下：

 // loading any preexisting todos that might be saved in *localStorage*.
    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();
    }

这里头进行的操作包括了事件的绑定，以及数据的读取。这些操作完成之后调用了Todos.fetch（）。fetch会将数据同步到服务器端，这这里没有服务器，所以就同步到了localstorage中，然后调用了reset方法。而reset绑定了方法addAll,所以接下来就调用了addAll，addAll调用了addOne,在addOne里面实例化了TodoView,而这个类就是主要用数据的同步然后显示的，接下来addOne里面初始化了render事件，一旦model改变就立刻调用render进行重绘。addOne里面也绑定了一些基本事件来进行一些操作。

 

疑问和问题就是感觉对理解起来也挺好理解的，但是想自己设计一下程序，发现困难很大。对于api的掌握也不熟悉。大致流程理解了，细节也不是很清楚。而且我感觉backbone的Control层和View层没有分离的很开。希望老师，助教上课能够再讲一下。