在Backbone中，this.model是未定義的，為什么？

Question

我到處尋找答案，但對我發現的東西不滿意。

問題是，我正在從Addy Osmani做一個教程，在Backbone中創建一個'Todo'應用程序，但是當我看到控制台時，我得到一個錯誤，說明this.model is undefined 。

我甚至試過這個SO回答Backbone模型錯誤顯示在控制台中 ，但我仍然得到相同的錯誤。 請告訴我有什么問題。

順便問一下，這個this.model或this.collection什么？ 我有一個想法，他們引用Backbone.Model和Backbone.Collection但它們如何工作？ 我問這個是因為在另一個教程中，當我清楚地定義Model和Collection時， this.collection和this.model.models也是未定義的。

非常感謝

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 ），您的視圖可以監聽待辦事件的事件並相應地重新渲染。

Answer 2

你沒有說，但我認為你得到的錯誤發生在render（）方法中。

您的問題是您定義了一種新類型的模型（ var Todo = Backbone.Model.extend({... ）但是您從未實例化它，也沒有將模型傳遞給todoview構造函數。

所以至少你需要這樣做：

var todomodel = new Todo();

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

Answer 3

另一個問題的答案是您的問題的答案：在實例化視圖時，您沒有將模型傳遞給視圖。

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

將對象傳遞給視圖的構造函數時，它會查找某些鍵並將它們直接附加到視圖中。

您可以通過查看Backbone的源代碼並搜索viewOptions來查看哪些viewOptions 。

這就是你如何得到this.model和this.collection自動附加到視圖的this 。