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

我试图基于RESTAPI返回的JSON对象的内容构建导航。我一直在尝试调整教程，但我在某个地方遇到了一点阻碍

我的应用程序使用以下基本结构：

  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;

  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;

除了Foo.Views.navItemView永远不会渲染到PrimaryNav视图中之外，所有内容都正常工作。我可以看到JSON在控制台中被成功加载，但只有包含的UL（Foo.Views.PrimaryNav）被呈现。很明显，在获取集合和在控制器中显示视图之间，我缺少了一个步骤

任何指点都将不胜感激

更新： 所以我重新修改了我的应用程序结构，将导航收集内容从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.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;

  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;

---

David Sulc写了一本关于木偶的书，查看书中示例的git回购

从您的代码中，我建议您按照示例中的方式在模块上组织代码，而不是像您那样在全局对象中组织代码

然后每个模块将有一个控制器，您可以使用它们来导航应用程序的所有部分

还可以查看木偶回购中的官方文件