Question

我是一个骨干新手，所以我在设置应用程序时遇到了麻烦。我正在使用主干 - 样板（https://github.com/tbranyen/backbone-boilerplate）和github-viewer（https://github.com/tbranyen/github-viewer）作为参考，但在运行时我似乎得到了“this.model未定义”。

这是我当前的router.js：

define([
    // Application.
    "app",

    //Modules
    "modules/homepage"
],
    function (app, Homepage) {
        "use strict";

        // Defining the application router, you can attach sub routers here.
        var Router = Backbone.Router.extend({
            initialize: function(){
                var collections = {
                    homepage: new Homepage.Collection()
                };

                _.extend(this, collections);

                app.useLayout("main-frame").setViews({
                    ".homepage": new Homepage.Views.Index(collections)
                }).render();
            },

            routes:{
                "":"index"
            },

            index: function () {
                this.reset();
                this.homepage.fetch();
            },

            // Shortcut for building a url.
            go: function() {
                return this.navigate(_.toArray(arguments).join("/"), true);
            },

            reset: function() {
                // Reset collections to initial state.
                if (this.homepage.length) {
                    this.homepage.reset();
                }

                // Reset active model.
                app.active = false;
            }

        });

        return Router;
    }
);

我的homepage.js模块：

define([
    "app"
],
function(app){
    "use strict";

    var Homepage = app.module();

    Homepage.Model = Backbone.Model.extend({
        defaults: function(){
            return {
                homepage: {}
            };
        }
    });

    Homepage.Collection = Backbone.Collection.extend({
        model: Homepage.Model,

        cache: true,

        url: '/app/json/test.json',

        initialize: function(models, options){
            if (options) {
                this.homepage = options.homepage;
            }
        }
    });

    Homepage.Views.Index = Backbone.View.extend({
        template: "homepage",
        el: '#mainContent',

        render: function(){
            var tmpl = _.template(this.template);

            $(this.el).html(tmpl(this.model.toJSON()));

            return this;
        },

        initialize: function(){
            this.listenTo(this.options.homepage, {
                "reset": function(){
                    this.render();
                },

                "fetch": function() {
                    $(this.el).html("Loading...");
                }
            });
        }
    });

    return Homepage;
});

提前感谢您的帮助！

更新经过大量的谷歌搜索（你应该看到我打开了多少个标签），我想我取得了一些进展，但仍然没有运气。我更新了路由器以获得以下内容：

app.useLayout("main-frame").setViews({
    ".homepage": new Homepage.Views.Index()
}).render();

我对homepage.js模块进行了一些修改，现在看起来像这样：

define([
    "app",
    ["localStorage"]
],
function(app){
    "use strict";

    var Homepage = app.module();

    Homepage.Model = Backbone.Model.extend({

        defaults: function(){
            return {
                homepage: {}
            };
        }
    });

    Homepage.Collection = Backbone.Collection.extend({
        //localStorage: new Backbone.LocalStorage("Homepage.Collection"),

        refreshFromServer: function() {
            return Backbone.ajaxSync('read', this).done( function(data){
                console.log(data);
                //save the data somehow?
            });
        },

        model: Homepage.Model,

        cache: true,

        url: '/app/json/test.json',

        initialize: function(options){
            if (options) {
                this.homepage = options.homepage;
            }else{
                //this.refreshFromServer();
            }
        }
    });

    Homepage.Views.Index = Backbone.View.extend({
        template: "homepage",
        el: '#mainContent',

        initialize: function(){
            var self = this;
            this.collection = new Homepage.Collection();
            this.collection.fetch().done( function(){
                self.render();
            });
        },

        render: function(){
            var data = this.collection;

            if (typeof(data) === "undefined") {
                $(this.el).html("Loading...");
            } else {
                $(this.el).html(_.template(this.template, data.toJSON()));
            }
            return this;
        }
    });

    return Homepage;
});

正如您所看到的，我有localStorage代码，但现在注释掉了，因为我只想让所有内容先工作。最终目标是进行初始调用，从JSON文件加载数据，然后继续使用localStorage。该应用稍后会在用户与我的应用进行多次互动后提交数据。

虽然主页模块没有在主视图中填充#mainContent容器，但我正在加载主视图。

我做了所有的谷歌搜索，但我感到沮丧的是，它只是没有为我下沉。再次感谢您查看此内容并感谢任何反馈！

Answer 1

我认为你的班级层次结构在这里有点不稳定。例如，您的Homepage.Collection实例实际上是从选项中分配homepage属性。然后，您将Homepage.Collection的实例作为Homepage.Views.Index选项传递给homepage ......这有点难以理解。

那就是说，在我看来，你的问题很简单，当你构建model时，你没有提供Homepage.Views.Index选项：

new Homepage.Views.Index(collections)

collections没有model属性，因此我不知道视图中的this.model.toJSON()后来如何可以访问模型。基本上，您似乎希望Homepage.Views.Index能够处理模型的集合，而不仅仅是一个。因此，您可能需要render函数中的循环超过this.collection（并且您应该将视图的结构更改为collection选项而不是homepage选项）

如果我在这里遗漏了一些东西，或者我不清楚这是因为我之前提到的这种数据模型奇怪。随意澄清你是如何理解的，我们可以再试一次:)）

Answer 2

这个示例代码对我来说有点混乱，但我认为问题在于以下两行代码：

".homepage": new Homepage.Views.Index(collections)
$(this.el).html(tmpl(this.model.toJSON()));

看起来您将集合传递给视图，但在视图中使用this.model，因此错误“this.model is undefined”，因为它确实是未定义的。

如果你没有匆忙，我可以建议你重新开始。看来你的尝试太快了。我看到你有骨干，requirejs（或其他一些模块加载器）和样板，这对于骨干新手来说是很多东西。相信我，我知道，因为我也相对较新。也许从一些你好世界的东西开始，然后慢慢开始。否则，通过各种项目的代码来破解你的方式可能会让人感到困惑。

骨干样板：“this.model未定义”

2 个答案: