backbone.js - 主干：重置事件在 li 中未显示任何内容

Question

我正在使用 Backbone，由于某种原因，我似乎无法通过重置事件显示任何内容。奇怪的是，当我触发 add 事件时，它会显示我所有的收藏。

我正在使用 0.9.2 版的 Backbone：

这是代码：

var TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#item-template').html()),
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this; // enable chained calls
  }
});

var CoursesPageView = Backbone.View.extend({
  el: '.page',

  initialize: function () {
    this.input = this.$('#new-todo');
    todoList.on('add', this.addAll2, this);
    todoList.on('reset', this.addAll, this);

    console.log("getting ready to fetch localstorage");
    todoList.fetch(); // Loads list from local storage
              // Also triggers reset event
  },

  render: function(){
    console.log("function: render2");
    var template = _.template($("#courses").html(),{});
    this.$el.html(template);
  },

  events: {
    'keypress #new-todo': 'createTodoOnEnter'
  },

  createTodoOnEnter: function(e){
    if ( e.which !== 13) { // ENTER_KEY = 13
      return;
    }

    console.log("function: createOnEnter");
    todoList.create({title: $('#new-todo').val()}); // triggers add event
    console.log("passed to localstorage: " + $('#new-todo').val());
    $('#new-todo').val('');     // cleans input box once enter is pressed    
  },

  addOne: function(todo){
    var view = new TodoView({model: todo});
    console.log("show li");
    $('#todo-list').append(view.render().el);
  },

  addAll: function(){
    console.log("reset event triggered");
    this.$('#todo-list').html(''); // clean the todo list
    todoList.each(this.addOne, this);
  },

  addAll2: function(){
    console.log("add event triggered");
    this.$('#todo-list').html(''); // clean the todo list
    todoList.each(this.addOne, this);
  },

});

对于 index.html 文件部分：

<script type="text/template" id="courses">
  <div class="navbar navbar-inverse navbar-fixed-top">  
    <div class="navbar-inner">  
      <div class="container">  
        <h4 align="center" style="color:white;">Courses</h4>
      </div>  
    </div>  
  </div>

  <div class="container">
    <a href="#newcourses" class="btn btn-primary">Add Course</a>
    <input id="new-todo">
    <section id="main">
      <ul id="todo-list"></ul>
    </section>

  </div>
</script>

<script type="text/template" id="item-template">
  <div class="view">
    <label><%- title %></label>
  </div>
</script>