在Backbone中,this.model是未定义的,为什么？

Question

我到处寻找答案,但对我发现的东西不满意.

问题是,我正在从Addy Osmani做一个教程,在Backbone中制作一个'Todo'应用程序,但当我看到控制台时,我得到一个错误说this.model is undefined.

我甚至试过这个SO回答Backbone模型错误显示在控制台中,但我仍然得到相同的错误.请告诉我有什么问题.

顺便说一句,什么是this.model或this.collection？我有一个想法,他们参考Backbone.Model,Backbone.Collection但他们如何工作？我问这是因为在另一个教程this.collection和this.model.models也是不确定的,当我明确的Model和Collection.

非常感谢

JS:

//Model
var Todo = Backbone.Model.extend({

  defaults: {
    title: 'Enter title here',
    completed: true
  },

  validate: function(attrs) {
    if (attrs.title === undefined) {
        return 'Remember to enter a title';
    }
  },

  initialize: function() {
    console.log('This model has been initialized');

    this.on('change:title', function() {
        console.log('-Title values for this model have changed');
    });

    this.on('invalid', function(model, error) {
        console.log(error);
    });
  } 
});

//View
var TodoView = Backbone.View.extend({

  el: '#todo',
  tagName: 'li',
  template: _.template($('#todoTemplate').html()),

  events: {
    'dbclick label': 'edit',
    'click .edit': 'updateOnEnter',
    'blur .edit': 'close'
  },

  initialize: function() {
    _.bindAll(this, 'render');
            this.render();

  },

  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.input = this.$('.edit');
    console.log(this.model.toJSON());
    return this;
  },

  edit: function() {
    //do something...
  },

  close: function() {
    //do something...
  },

  updateOnEnter: function() {
    //do something...
  }
});

var todoview = new TodoView();
console.log(todoview.el);

//Collection
var TodoList = Backbone.Collection.extend({
  model: Todo
});

Answer 1

您需要实例化一个Model或Collection将其传递给您的视图.否则,在TodoView上调用render方法时,this.model将为null.

例如,尝试重新排列代码的最后几行,如下所示:

//Collection
var TodoList = Backbone.Collection.extend({
  model: Todo
});

var todos = new TodoList();

var todoview = new TodoView({model: todos});

从那时起,您可以修改待办事项(这是一个Collection),您的视图可以监听待办事件的事件并相应地重新渲染.