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

MrC*_*oft 2 javascript backbone.js backbone-views

我刚刚决定学习骨干.我正在关注视频教程.一切都在那里工作正常,但在我的结尾我得到这个错误"Uncaught TypeError:无法读取未定义的属性'名称'".

这是我的代码:


    var MenuItemDetails = Backbone.View.extend({
        render: function() {
            var markup = this.options.name + this.options.category + this.options.imagepath;
            // I also had some html markup in the string above, of course, but I've striped it because stackoverflow didn't show it in the preview of my post.
            this.$el.html(markup);
            return this;
        }
    });

    var AppRouter = Backbone.Router.extend({
        routes: {
            "" : "list",
            "menu-items/new" : "itemForm",
            "menu-items/:item" : "itemDetails"
        },

        list: function() {
            $('#app').html('List screen');
        },

        itemDetails: function(item) {
            var view = new MenuItemDetails({ name: item, category: 'Some category', imagepath: 'no-image.jpg' });
            $('#app').html(view.render().el);
        },

        itemForm: function() {
            $('#app').html('New item form');
        }
    });

    var app = new AppRouter();

    $(function() {
        Backbone.history.start();
    });

"itemDetails"函数给出了"未捕获的TypeError:无法读取未定义的属性'名称"错误.当然,如果我不在视图中使用'name'属性,我会得到"Uncaught TypeError:无法读取未定义的属性'类别'".在我正在关注的视频教程中,一切正常(它使用了版本0.9.1 of backbonejs).我使用最新的(1.1.0).

有谁知道为什么我会收到这个错误?没有任何拼写错误,一切都是正确的顺序(完全如视频教程,它的工作原理).为什么骨干会抛出这个错误?

mu *_*ort 7

骨干视图用于自动将构造函数选项复制到this.options 但不再:

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

  • Backbone Views不再自动附加传递给构造函数的选项this.options,但如果您愿意,可以自己执行.

因此,如果您依赖于this.options在视图中设置,那么您必须自己完成:

var MenuItemDetails = Backbone.View.extend({
    initialize: function(options) {
        this.options = options;
    },
    //...
});
Run Code Online (Sandbox Code Playgroud)

或者更好的是,解压缩选项,以便了解视图的界面:

initialize: function(options) {
    this.options = _(options).pick('name', 'category', 'imagepath');
}
Run Code Online (Sandbox Code Playgroud)

这样你至少可以列出你期望看到的内容options.