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.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();

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

2 个答案:

普通JS对象

使用Marionette.Object