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

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

Marionette: how to use multiple controllers in AppRouter?

controller

backbone.js

single-page-application

marionette

普通 JS 对象

和Marionette.Object