使用Backbone.Marionette从JSON动态生成站点导航

我正在尝试根据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移到了控制器中，现在它能工作了。更新的简化结构:

  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;