获取 TypeError：this.options 未定义

Question

我正在尝试学习 BackboneJS，这是我遇到的错误。

我正在使用 coffeescript 进行编码，这是生成的 JS，我不知道为什么会发生这种情况，因为我认为我做得正确。

(function() {
  var AppRouter, MenuItemDetails, app;

  MenuItemDetails = Backbone.View.extend({
    render: function() {
      var markup;
      markup = "<div>" + this.options.category + "</div>";
      this.$el.html(markup);
      return this;
    }
  });

  AppRouter = Backbone.Router.extend({
    routes: {
      "": "list",
      "menu-items/new": "itemForm",
      "menu-items/:item": "itemDetails"
    },
    list: function() {
      return $('#app').html('List Screen');
    },
    itemDetails: function(item) {
      var view;
      view = new MenuItemDetails({
        name: item,
        category: 'Entree',
        imagepath: 'no-image.jpg'
      });
      return $('#app').html(view.render().el);
    },
    itemForm: function() {
      return $('#app').html("New item form");
    }
  });

  app = new AppRouter();

  Backbone.history.start();

}).call(this);

/*
//@ sourceMappingURL=app.map
*/

我哪里错了？

Answer 1

尝试这样做：

  MenuItemDetails = Backbone.View.extend({
    initialize: function(options) {
      this.options = options;
    },
    render: function() {
      var markup;
      markup = "<div>" + this.options.category + "</div>";
      this.$el.html(markup);
      return this;
    }
  });

Answer 2

您错误地使用了this 关键字。

MenuItemDetails = Backbone.View.extend({
render: function() {
  var markup;
  markup = "<div>" + this.options.category + "</div>"; // Error
  this.$el.html(markup);
  return this;
 }
});

this 指向一个不包含属性选项的范围。你应该做这样的事情

 var self = this;
 MenuItemDetails = Backbone.View.extend({
    render: function() {
        var markup;
        markup = "<div>" + self.options.category + "</div>"; // Error
        this.$el.html(markup);
       return this;
   }
 });