9

我到处寻找答案，但对我的发现并不满意。

问题是，我正在做一个来自 Addy Osmani 的教程，以在 Backbone 中制作一个“Todo”应用程序，但是当我查看控制台时，我收到一条错误消息this.model is undefined。

我什至尝试了这个 SO answer Backbone model error shown in console，但我仍然得到同样的错误。请告诉我有什么问题。

顺便说一句，什么是this.model或this.collection？我有一个想法，他们指的是Backbone.Model，Backbone.Collection但他们是如何工作的？我问这个是因为在另一个教程中this.collection并且this.model.models也未定义，当我明确定义Modeland时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
});
4

3 回答 3

12

您需要实例化一个ModelorCollection并将其传递给您的视图。否则，当在 TodoView 上调用 render 方法时，this.model将为 null。

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

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

var todos = new TodoList();

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

从那时起，您可以修改 todos（即 a Collection）并且您的视图可以监听 todos 的事件并相应地重新渲染。

于 2013-02-14T01:37:49.290 回答
4

另一个问题的答案就是您的问题的答案：实例化视图时，您没有将模型传递给视图。

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

当您将对象传递给视图的构造函数时，它会查找某些键并将它们直接附加到视图。

您可以通过查看Backbone 的源代码并搜索viewOptions.

这就是你如何获得this.model并this.collection自动附加到视图的this.

于 2013-02-14T01:42:37.217 回答
3

你没有说，但我认为你得到的错误发生在 render() 方法中。

您的问题是您定义了一种新类型的模型（var Todo = Backbone.Model.extend({...）但是您从未实例化它，也没有将模型传递给 todoview 构造函数。

所以至少你需要做：

var todomodel = new Todo();

var todoview = new TodoView({
    model: todomodel
});
于 2013-02-14T01:41:42.717 回答