带路由的木偶深嵌套区域

Question

我们将modularised木偶应用到了modules.但是现在我们完全失去了如何处理路由器的不同入口点并恢复正确区域中的状态.

应用程序的问题是自上而下,区域嵌套在另一个区域等等...(见图).使这种困难的原因是自上而下也不是一条直线,每个模块中都有菜单指示在其下方加载哪个其他模块.我们无法弄清楚如何传递一系列命令或指令来复制状态.

每个模块都有自己的布局/地区并触发另一个模块传递为参数上又有region和model.

我们基本上承认了一个国家可以采取的三种不同方式.

1. 使用应用程序中的按钮从上到下进行APP导航
2. 网址匹配时的路由器
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我们可以拿起它并沿途顺序设置一个触发器钩子path1 path2 path3 path4.这里的另一个问题是,当用户按下前进/后退时,我们之后只触发结束挂钩,即path3所以我们再次卡在这里,并认为我们做错了.

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

Answer 1

我建议参数化路线。我对 CoffeeScript 不太熟悉，但这是我正在开发的一个 Web 应用程序中基于 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 知道如何从路由中提取值（使用“：”）并将它们传递到函数中。这将解决您的重建/将值传递到以后的视图的问题，同时防止递归/传播。