Javascript 获取类型错误：this.options未定义

我正在努力学习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
*/

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

（函数（）{
var AppRouter，MenuItemDetails，应用程序；
MenuItemDetails=Backbone.View.extend({
render:function（）{
var加成；
markup=“”+this.options.category+”；
这个.$el.html（标记）；
归还这个；
}
});
AppRouter=Backbone.Router.extend({
路线：{
“：”列表“，
“菜单项/新建”：“项目表单”，
“菜单项/：项”：“项详细信息”
},
列表：函数（）{
返回$（'#app'）.html（'列表屏幕'）；
},
itemDetails：功能（项目）{
var观点；
视图=新菜单项详细信息({
名称：项目，
类别：“主菜”，
imagepath:'无图像.jpg'
});
返回$（'#app'）.html（view.render（）.el）；
},
itemForm:function（）{
返回$（'#app'）.html（“新项目表单”）；
}
});
app=新批准人（）；
Backbone.history.start（）；
}).打电话（这个）；
/*
//@sourceMappingURL=app.map
*/

---

我哪里出错了？

您使用的

关键字不正确

(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
*/

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

MenuItemDetails=Backbone.View.extend({
render:function（）{
var加成；
markup=”“+this.options.category+“”；//错误
这个.$el.html（标记）；
归还这个；
}
});

此选项指向不包含属性选项的范围。你应该这样做

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

var self=this；
MenuItemDetails=Backbone.View.extend({
render:function（）{
var加成；
markup=”“+self.options.category+“”；//错误
这个.$el.html（标记）；
归还这个；
}
});
您错误地使用了
这个
关键字

(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
*/

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

MenuItemDetails=Backbone.View.extend({
render:function（）{
var加成；
markup=”“+this.options.category+“”；//错误
这个.$el.html（标记）；
归还这个；
}
});

此选项指向不包含属性选项的范围。你应该这样做

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

var self=this；
MenuItemDetails=Backbone.View.extend({
render:function（）{
var加成；
markup=”“+self.options.category+“”；//错误
这个.$el.html（标记）；
归还这个；
}
});
试着这样做：

  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;
    }
  });

MenuItemDetails=Backbone.View.extend({
初始化：函数（选项）{
this.options=选项；
},
render:function（）{
var加成；
markup=“”+this.options.category+”；
这个.$el.html（标记）；
归还这个；
}
});
试着这样做：

  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;
    }
  });

MenuItemDetails=Backbone.View.extend({
初始化：函数（选项）{
this.options=选项；
},
render:function（）{
var加成；
markup=“”+this.options.category+”；
这个.$el.html（标记）；
归还这个；
}
});
这与此问题/答案类似吗？基本上，默认情况下，此.options可能不再可用。非常感谢！你把我送到了正确的方向！这与这个问题/答案类似吗？基本上，默认情况下，此.options可能不再可用。非常感谢！你把我送到了正确的方向！我尝试了以下方法：initialize:function（options）{return this.options=options | |{}；}，效果很好。虽然您的观点在普通JavaScript中是正确的，但在使用主干扩展时却不正确。主干将复制您定义的函数，并将其传递到对象的原型，以便在调用时将此

正确地设置为对象的实例。我尝试了以下方法：initialize:function（options）{return this.options=options | |{}}，并且成功了。虽然您的观点在普通JavaScript中是正确的，在使用主干网的扩展时，情况并非如此。主干将复制您定义的函数，并将其传递到对象的原型，以便在调用时将此正确设置为对象的实例。