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

Question

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

Answer 1

David Sulc写了一本关于Marionette的书，查看书中这个例子的git repo。

https://github.com/davidsulc/marionette-gentle-introduction

从您的代码中我建议在示例中组织模块上的代码，而不是像您一样在全局对象中组织代码。

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

还可以查看Marionette repo中的官方文档。

https://github.com/marionettejs/backbone.marionette/tree/master/docs