REST API によって返された JSON オブジェクトのコンテンツに基づいてナビゲーションを構築しようとしています。私はDavid Sulc のチュートリアルを適応させることを検討してきましたが、どこかで少しブロッカーに遭遇しています。
私のアプリは、次の基本構造を使用しています。
window.Foo = {
Routers: {},
Models: {},
Collections: {},
Views: {},
Controllers: {}
};
Foo.App = new Backbone.Marionette.Application({});
Foo.App.addRegions({
navRegion: '#nav-wrapper'
});
Foo.App.on("initialize:after", function(options){
if (Backbone.history){
Backbone.history.start();
}
});
/* MODELS & COLLECTIONS */
// Nav
Foo.Models.Nav = Backbone.Model.extend({});
Foo.Collections.Nav = Backbone.Collection.extend({
model: Foo.Models.Nav,
url: '/static/js/data/nav.json'
});
/* VIEWS */
Foo.Views.NavLayout = Backbone.Marionette.Layout.extend({
className: 'scroll',
template: navTemplate,
regions: {
'primary': '#primary-nav'
}
});
Foo.Views.navItemView = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: navItemTemplate
});
Foo.Views.PrimaryNav = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
itemView: Foo.Views.navItemView
});
/* CONTROLLER */
Foo.Controllers.Controller = {
navLayout: new Foo.Views.NavLayout(),
primaryNav: new Foo.Views.PrimaryNav({collection: Foo.navCollection}),
home: function() {
Foo.App.navRegion.show(this.navLayout);
this.navLayout.primary.show(this.primaryNav);
}
}
/* ROUTER */
Foo.Routers.Router = Backbone.Marionette.AppRouter.extend({
controller: Foo.Controllers.Controller,
appRoutes: {
'': 'home'
}
});
/* INITIALIZER */
Foo.App.addInitializer(function(options) {
Foo.navCollection = new Foo.Collections.Nav();
Foo.navCollection.fetch();
Foo.router = new Foo.Routers.Router();
});
return Foo;
Foo.Views.navItemView が PrimaryNav ビューにレンダリングされないことを除いて、すべてが正常に機能しているように見えます。JSON がコンソールに正常に読み込まれていることを確認できますが、含まれている UL (Foo.Views.PrimaryNav) のみがレンダリングされます。コレクションを取得してからコントローラーにビューを表示するまでのステップが明らかに欠けています。
どんなポインタでも大歓迎です！
更新: そこで、アプリの構造を作り直し、 Nav コレクションのものを addInitializer から Controller に移動したところ、現在は機能しています。簡素化された構造の更新:
window.Foo = {
Routers: {},
Models: {},
Collections: {},
Views: {},
Controllers: {}
};
Foo.App = new Backbone.Marionette.Application({});
Foo.App.addRegions({
navRegion: '#nav-wrapper'
});
Foo.App.on('initialize:after', function(options){
if (Backbone.history){
Backbone.history.start();
}
});
/* MODELS & COLLECTIONS */
// Nav
Foo.Models.Nav = Backbone.Model.extend();
Foo.Collections.PNav = Backbone.Collection.extend({
model: Foo.Models.Nav,
url: '/static/js/data/primary-nav.json'
});
/* VIEWS */
// Nav
Foo.Views.NavLayout = Backbone.Marionette.Layout.extend({
className: 'scroll',
template: navTemplate,
regions: {
'primary': '#primary-nav',
'favourites': '#favourites-nav'
}
});
Foo.Views.navItemView = Backbone.Marionette.ItemView.extend({
model: Foo.Models.Nav,
tagName: 'li',
template: navItemTemplate
});
Foo.Views.PrimaryNav = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
itemView: Foo.Views.navItemView
});
/* CONTROLLER */
Foo.Controllers.Controller = {
setupHasRun: false,
setup: function() {
var navLayout = new Foo.Views.NavLayout(),
primaryNavCollection = new Foo.Collections.PNav(),
primaryNavFetch = primaryNavCollection.fetch({async: false}),
primaryNav = new Foo.Views.PrimaryNav({collection: primaryNavCollection}),
Foo.App.navRegion.show(navLayout);
navLayout.primary.show(primaryNav);
this.setupHasRun = true;
}
}
/* ROUTER */
Foo.Routers.Router = Backbone.Marionette.AppRouter.extend({
controller: Foo.Controllers.Controller,
appRoutes: {
// Home
'': 'home'
}
});
/* INITIALIZER */
Foo.App.addInitializer(function(options) {
Foo.router = new Foo.Routers.Router();
contentPanes();
});
return Foo;