我是一个骨干新手，所以我在设置应用程序时有点摸索。我使用主干样板（https://github.com/tbranyen/backbone-boilerplate）和 github-viewer （https://github.com/tbranyen/github-viewer）作为参考，虽然在运行时我似乎得到了“this.model is undefined”。
这是我当前的 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 容器。
我做了所有我能做的谷歌搜索，但沮丧的是它并没有让我陷入困境。再次感谢您查看此内容，感谢您提供任何反馈！