Backbone.js 主干网、木偶网、RequireJS应用程序启动

我正在用主干网、木偶网和RequireJS构建一个应用程序，如果应用程序启动可以以任何方式改进的话，我希望由一些更有经验的人来运行

文件夹结构：

index.html
js/
  collections/
  libs/
    backbone.js
    marionette.js
    require.js
    ...
  models/
  views/
  app.js
  init.js
  router.js

目前该应用程序的引导如下

index.html

将requireJS入口点定义为：

<script data-main="js/init" src="js/libs/require.js"></script>

App.js

中的应用程序模块：

App = new Backbone.Marionette.Application();

App.addInitializer(function (options) {
  // initialize the Router; will only setup the routes and corresponding callbacks; not history.start()
  App.router = new Router();
  // initialize Marionette regions
  App.addRegions({
    'header': '#header',
    'main': '#main',
    'footer': '#footer'
  });
});

App.on('start', function(options) {
  Backbone.history && Backbone.history.start() || console.error('No "Backbone.history" to .start()');
});

return App;

return Backbone.Router.extend({
    routes: {      
      'panel/:handle': 'showPanel',
    },

    showPanel: function (handle) {
      require(['app'], function (App) {
        App.main.show(new Panel_v({userHandle: handle}));
      });  
    }      
});

Router.js

中的路由器模块：

App = new Backbone.Marionette.Application();

App.addInitializer(function (options) {
  // initialize the Router; will only setup the routes and corresponding callbacks; not history.start()
  App.router = new Router();
  // initialize Marionette regions
  App.addRegions({
    'header': '#header',
    'main': '#main',
    'footer': '#footer'
  });
});

App.on('start', function(options) {
  Backbone.history && Backbone.history.start() || console.error('No "Backbone.history" to .start()');
});

return App;

return Backbone.Router.extend({
    routes: {      
      'panel/:handle': 'showPanel',
    },

    showPanel: function (handle) {
      require(['app'], function (App) {
        App.main.show(new Panel_v({userHandle: handle}));
      });  
    }      
});

有没有办法使路由器模块不那么复杂？我用这种方法解决了由App->Router->App形成的循环依赖问题

---

还有其他建议吗？

我最近提出了这个解决方案，在main.js文件中加入了应用程序和路由器：

App.js

define(['marionette'], function(Marionette) {
  var App;
  App = new Backbone.Marionette.Application();
  App.vars = {};
  App.addRegions({
    headerRegion: "#header-region",
    mainRegion: "#main-region",
    footerRegion: "#footer-region",
    dialogsRegion: "#dialogs"
  });
  App.vent.on("routing:started", function() {
    Backbone.history.start();
  });
  return App;
});

路由器.js

    define(['marionette', 'app'], function(Marionette, App) {
      var appRouter, routerController;
      routerController = {
        showViaggi: function() {
          return require(['modules/viaggi/viaggi'], function(Viaggi) {
            App.Modules.viaggi = new Viaggi();
            return App.Modules.viaggi.start();
          });
        }
      };
      return appRouter = Backbone.Marionette.AppRouter.extend({
        appRoutes: {
          'viaggi': 'showViaggi'
        },
        controller: routerController
      });
    });

还有Main.js，我的初始脚本加载了Require.js

define(['app', 'routers/appRouter'], function(App,appRouter) {
  App.addInitializer(function() {
    App.Router = new appRouter;
    return App.vent.trigger("routing:started");
  });
  return App.start();
});

---

美好的这样可以在路由器上解开一点意大利面。不过有一件事。将App.addRegions（）放在App.addInitializer（）中不是更有意义吗？我想这取决于你的口味，也许它在语义上更正确，但最终你得到的效果是一样的。