骨干无法读取骨干视图中未定义错误的属性“属性”

Posted 2023-02-23

【中文标题】骨干无法读取骨干视图中未定义错误的属性“属性”

【英文标题】：Backbone Cannot read property 'property' of undefined error in backbone view

【发布时间】：2014-01-04 00:35:31

【问题描述】：

我刚刚决定学习骨干。我正在关注视频教程。那里一切正常，但最后我收到此错误“Uncaught TypeError: Cannot read property 'name' of undefined”。

这是我的代码：

var MenuItemDetails = Backbone.View.extend( 渲染：函数（） var 标记 = this.options.name + this.options.category + this.options.imagepath； // 当然，我在上面的字符串中也有一些 html 标记，但是我已经将它条带化了，因为 *** 没有在我的帖子的预览中显示它。 this.$el.html(标记); 返回这个； ); var AppRouter = Backbone.Router.extend( 路线： ““ ： “列表”， “菜单项/新”：“itemForm”， “菜单项/：项目”：“项目详细信息” , 列表：函数（） $('#app').html('列表屏幕'); , 项目详情：功能（项目） var view = new MenuItemDetails( name: item, category: 'Some category', imagepath: 'no-image.jpg' ); $('#app').html(view.render().el); , 项目形式：函数（） $('#app').html('新建项目表单'); ); var app = new AppRouter(); $（函数（） Backbone.history.start(); );

“itemDetails”函数给出“Uncaught TypeError: Cannot read property 'name' of undefined”错误。当然，如果我不在视图中使用 'name' 属性，我会得到“未捕获的类型错误：无法读取未定义的属性 'category'”。在我正在关注的视频教程中，一切正常（它使用 0.9.1 版的主干js）。我用的是最新的（1.1.0）。

有人知道我为什么会收到这个错误吗？ 没有任何拼写错误，一切都按正确的顺序排列（就像在视频教程中一样）。为什么主干会向我抛出这个错误？

【参考方案1】：

用于自动将构造函数选项复制到this.options but no longer 的主干视图：

更改日志1.1.0 - 2013 年 10 月 10 日

主干视图不再自动附加作为this.options 传递给构造函数的选项，但如果您愿意，您可以自己做。

因此，如果您依赖 this.options 在您的视图中设置，那么您必须自己做：

var MenuItemDetails = Backbone.View.extend(
    initialize: function(options) 
        this.options = options;
    ,
    //...
);

或者更好的是，解压缩选项以便您知道视图的界面是什么：

initialize: function(options) 
    this.options = _(options).pick('name', 'category', 'imagepath');

这样你至少有一个你希望在options看到的列表。

【讨论】：

我喜欢将选项列入白名单。另一个值得一读的答案:)

@nikoshr: 是的，我从不喜欢自动 this.options 的东西，太多无法追踪的“我应该如何在六个月内调试这种远距离操作的东西？”符合我口味的魔法。