带有路由的 Marionette 深层嵌套区域

Question

我们将modularised 我们的木偶应用程序添加到modules。然而，现在我们完全不知道如何处理来自 路由器 的不同入口点并恢复正确区域中的状态。

问题是应用程序是自上而下的，区域嵌套在另一个区域内等等......（见图）。使这变得困难的是自上而下也不是一条直线，每个模块中都有菜单指示在其下方加载哪个其他模块。我们只是不知道如何传递一系列命令或指令来复制状态。

每个模块都有自己的布局/区域并触发另一个模块作为参数再次传递另一个region 和model。

我们基本上承认了 3 种不同的方式可以建立一个状态。

1. 应用内导航使用应用中的按钮自上而下
2. ROUTER 当 url 匹配时
3. 浏览器历史记录在使用上一个/后退按钮时

一些代码

@MyApp = do (Backbone, Marionette) ->

  App = new Marionette.Application

  App.addRegions
    mainRegion: "#main"

  model = ...
  App.execute "module:1:load", App.mainRegion, model

## -------------------------------------------------------

@MyApp.module "ModuleOne", (ModuleOne, App, Backbone, Marionette, $, _) ->
  @startWithParent = false

  ## MODULE
  class ModuleOne.Show.Controller extends Marionette.Controller

    initialize: (options) ->
      @layout = @getLayoutView()
      @region = options.region
      @model = options.model

      @listenTo @layout, "show", =>
        @showRegionOne()
        @showRegionTwo()

      @region.show(@layout)

    showRegionTwo: ->
      App.execute "module:2:load", @layout.regionTwo, @model

      ...


  ## API
  API =
    show: (region, model) ->
      new ModuleOne.Show.Controller
        region: region
        model: model

  App.vent.on "module:1:load", (region, model) ->
    API.show region, model


  ## ROUTER
  class ModuleOne.Router extends Marionette.AppRouter
    routes:
      "path1/*subroute" : "pathOne"
    pathOne: (hash) ->
      ## this gets triggered on URL enter if /path1 is in URL
      new App.ModuleTwo.Router("path1")

  App.addInitializer ->
    new ModuleOne.Router

## -------------------------------------------------------

@MyApp.module "ModuleTwo", (ModuleTwo, App, Backbone, Marionette, $, _) ->
  @startWithParent = false

  ## MODULE
  ...

  ## API
  API =
    show: (region, model) ->
      new ModuleTwo.Show.Controller
        region: region
        model: model

  App.vent.on "module:2:load", (region, model) ->
    API.show region, model

  ## ROUTER
  API_ROUTER = 
    pathTwo: ->
      new App.ModuleThree.Router("path1/path2")
  class ModuleTwo.Router extends Marionette.SubRouter
    controller: API_ROUTER
    appRoutes:
      "path2/*subroute" : "pathTwo"

## -------------------------------------------------------

@MyApp.module "ModuleThree", (ModuleThree, App, Backbone, Marionette, $, _) ->
  @startWithParent = false

  ## MODULE

  ## API
  API =
    show: (region, model) ->
      new ModuleThree.Show.Controller
        region: region
        model: model

  App.vent.on "module:3:load", (region, model) ->
    API.show region, model

  ## ROUTER
  API_ROUTER = 
    pathThree: ->
      new App.ModuleFour.Router("path1/path2/path3")
  class ModuleThree.Router extends Marionette.SubRouter
    controller: API_ROUTER
    appRoutes:
      "path3/*subroute" : "pathThree"  

补充说明

我们使用了Marionette.SubRouter，它允许我们模块化路由定义，因为每个模块只知道它自己的相对 URL，不知道它之前的内容。 目前，如果用户访问/path1/path2/path3/path4，我们可以在path1path2path3path4 处将其拾取并设置触发钩子。这里的另一个问题是，当用户向前/向后按下时，我们只会触发结束钩子，即path3，所以我们再次卡在这里并认为我们做错了。

我们是否应该尝试递归地告诉它从路径的末端向后加载到根module4(path4) > module3(path 3) > module(path 2) > module1(path 1)或者我们是否应该找到一种机制来指示每个模块向下的路径@987654335 @

Answer 1

我会建议参数化路线。我对coffeescript不够熟悉，但这是我正在开发的webapp中基于JS的示例：

ClientsApp.Router = Marionette.AppRouter.extend({
  appRoutes: {
      //...
      "clients/:id/result/:resultID":"showReport",
      //
  }
});

var API = {
  showReport: function(id, resultID){
      ClientsApp.Show.Controller.showReport(id, resultID);
  },
}; 

您可以指定驱动后续模块的任何状态的参数，并且 Marionette 知道如何从路由中提取值（使用“:”）并将它们传递给函数。这将解决您的重建/将值传递给以后的视图，同时防止递归/传播。