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

Question

我正在尝试根据 REST API 返回的 JSON 对象的内容构建导航。我一直在考虑尝试适应David Sulc's教程，但我在某处遇到了一些阻碍。

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

  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 View 中。我可以看到 JSON 已成功加载到控制台中，但仅渲染包含的 UL (Foo.Views.PrimaryNav)。我显然错过了获取集合和在 Controller 中显示 View 之间的某个步骤。

任何指点将不胜感激!

更新:因此，我重新设计了我的应用程序结构，并将 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 存储库。

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

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

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

另请查看 Marionette 存储库中的官方文档。

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