我正在尝试根据 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;