Marionette：如何在 AppRouter 中使用多个控制器？

Question

这将是一个重复的问题，但我无法找到有关如何在 AppRouter 中使用多个控制器的任何实际答案，例如在我的代码中我正在尝试什么：

define([
'marionette', 
 'apps/contents/workpackage/workpackage_controller',
 'apps/contents/overview/overview_controller',

], function(
Marionette, 
WorkpackageController
OverviewController

) {

return Marionette.AppRouter.extend({
initialize: function(options) {
  this.wpcontroller = new WorkpackageController({region: options.region});
  this.ovcontroller = new OverviewController({region: options.region});
},
appRoutes: {
  'wp1': 'wpcontroller#workPackageContents1', //Workpackage Controller
  'overview': 'ovcontroller #overviewcontent' //Overview Controller
}
});
});

Answer 1

好吧，您可能已经知道，AppRouter 不需要多个控制器。但这并不意味着你不能模块化你的控制器对象。我的意思是您可以将多个控制器对象连接在一起。在此示例中，请注意我的控制器是符合 v2.4.4 规范的普通对象（请参阅docs）。 （如果你想要一些 Marionette 功能，你可以简单地在一个控制器上使用 Marionette.Object 并按照下面的方法进行操作。）

普通 JS 对象

所以，如果控制器定义为：

var workpackageController = {
  workPackageContents1: function () {
    // method logic //
  }
}

和其他：

var overviewController = {
  overviewcontent: function () {
    // method logic //
  }
}

然后我会像这样实例化我的 AppRouter：

return Marionette.AppRouter.extend(
  appRoutes: {
    'wp1': 'workPackageContents1', //Workpackage Controller
    'overview': 'overviewcontent' //Overview Controller
  },
  controller: _.extend(workpackageController, overviewController)
});

我正在使用下划线的_.extend() 将我的控制器对象的属性合并到一个Marionette.AppRouter 可以提取的对象中。这意味着独立控制器对象中的方法必须具有唯一的名称，否则会发生名称冲突。也就是说，您失去了以前独立对象的命名空间。

考虑到您仍在使用一个控制器对象，这可能适合您，也可能不适合您。但是，它确实允许您整理控制器对象。

与 Marionette.Object

如果您决定使用 Marionette.Object，只需将_.extend() 中第一个对象的定义更改为：

var WorkpackageController = Marionette.Object.extend({
  workPackageContents1: function () {
    // method logic //
  }
})

你的_.extend() 现在看起来像：

_.extend(new WorkpackageController, overviewController);

其中overviewController 仍然是一个普通对象，您可以使用它来简单地向 WorkpackageController 添加更多方法。

Answer 2

您可以创建两个（或多个路由器实例，每个实例都有自己的控制器）：

var WorkpackageRouter = Marionette.AppRouter.extend({
  appRoutes: {
    'wp1': 'workPackageContents1'
 },

 controller: new WorkpackageController({region: options.region});
});

var OverviewRouter = Marionette.AppRouter.extend({
  appRoutes: {
    'overview': 'overviewcontent'
 },

 controller: new OverviewController({region: options.region});
});

//later
var router1 = new OverviewRouter();
var router2 = new WorkpackageRouter();
Backbone.history.start();