Question

我们将modularised我们的牵线木偶申请加入modules。但是现在我们完全失去了如何处理路由器中的不同入口点并恢复正确区域中的状态。

enter image description here

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

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

我们基本上承认了一个州可以采用的三种不同方式。

IN APP NAVIGATION 从上到下使用应用中的按钮
ROUTER
浏览器历史

部分代码

@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) OR ，如果我们找出一种机制来指示每个模块向下采取的路径path 1 > path 2 > path 3 > path 4

Answer 1

我会建议参数化路线。我对coffeescript不够熟悉，但这里是一个基于JS的例子来自我正在研究的webapp：

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

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

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

带路由的木偶深嵌套区域

1 个答案: