无法填充简单的集合和输出来查看

Question

正如你所看到的，我是骨干的新手，我无法解决为什么这不起作用???

我收到此错误？

  

未捕获的TypeError：无法调用未定义的方法'on'

CODE

TodoItem = Backbone.Model.extend({});

TodoList = Backbone.Collection.extend({
    model: TodoItem,
    url: "todo"
});

var TodoView = Backbone.View.extend({
    el: '#content',
    initialize: function() {
        this.model.bind('change', this.render, this);
    },
    render: function(model) {
        this.$el.html('test');
    }
});

$(function() {

    var todoList = new TodoList();

    todoList.fetch();

    new TodoView();

});

网址TODO - JSON

  

[{description：'拿起牛奶。'，状态：'不完整'，id：1}，
  {description：'洗车'，状态：'不完整'，id：2}]

Answer 1

您在视图中使用this.model：

initialize: function() {
    this.model.bind('change', this.render, this);
},

但您在创建视图时未指定模型：

new TodoView();

这看起来应该更像：

new TodoView({ model: some_model })

如果您希望TodoView查看整个集合，请使用this.collection：

initialize: function() {
    this.collection.on('change', this.render, this);
}

并在创建视图时提供collection选项：

new TodoView({ collection: todoList });

另请注意，todoList.fetch();是一个AJAX调用，因此在创建视图时，todoList可能没有任何内容，您可以绑定到'reset'事件以重新呈现什么东西出现时：

initialize: function() {
    _.bindAll(this, 'render');
    this.collection.on('change', this.render);
    this.collection.on('reset',  this.render);
}

您还可以使用_.bindAll将函数绑定到this，这样您就不需要将第三个参数用于on。

顺便说一句，bind是on的别名，bind仍有效，但on是新代码的首选方法; AFAIK，名称更改为on以更好地匹配较新的jQuery命名方案。