私はバックボーンの初心者なので、アプリをセットアップするのに少し悩んでいます。私はbackbone-boilerplate（https://github.com/tbranyen/backbone-boilerplate）とgithub-viewer（https://github.com/tbranyen/github-viewer）を参照として使用していますが、実行中は「this.modelisundefined」を取得しているようです。
これが私の現在の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コンテナを設定していませんが、メインビューをロードしています。
私はできる限りのグーグルをしましたが、それが私のために沈んでいないことに不満を感じました。これをご覧いただきありがとうございます。フィードバックをお待ちしております。