javascript - Marionette 带路由的深层嵌套区域

Question

我们已经模块化我们的 Marionette 应用程序到模块。然而，现在我们完全不知道如何处理来自路由器的不同入口点并在正确的区域恢复状态。

问题是应用程序是自上而下的，区域嵌套在另一个区域中等等......(见图表)。困难在于自上而下也不是一条直线，每个模块中都有菜单指示要在其下方加载哪个其他模块。我们只是想不出如何传递命令或指令链来复制状态。

每个模块都有自己的布局/区域，并触发另一个模块再次作为参数传递给另一个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，我们可以将其拾取并沿途设置触发 Hook ，并按顺序在 path1 path2 路径3 路径4。这里的另一个问题是，当用户向前/向后按下时，我们只会触发结束钩子(Hook)，即 path3，所以我们再次被困在这里，并认为我们做错了。

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

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 知道如何从路由中提取值(使用“:”)并将它们传递到函数中。这将解决您将值重建/传递给以后的 View 的问题，同时防止递归/传播。