We have modularised our puppet application in modules . However, now we will completely lose how to process different entry points from the router and restore the state in the correct regions.
The problem is that the application is top-down, regions are nested in another region, etc. etc. (see diagram). What complicates the fact that the top down is also not a straight line, each module has menus that determine which other module loads under it. We simply cannot figure out how to go through a chain of commands or instructions for state replication.
Each module has its own layout / region and launches another module, which is again passed as the region and model parameter.
We essentially recognized 3 different ways of creating a state.
- IN APP NAVIGATION from top to bottom using buttons in the application
- ROUTER when URL matches
- BROWSER HISTORY when using the previous / back buttons
some code
@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"
extra notes
We played with Marionette.SubRouter , which allows us to modulate the definition of routes in that each module knows only its relative URL and does not know what is in front of it. Currently, if the user goes to /path1/path2/path3/path4 , we can pick it up and set the trigger hook on the path and in the order path1 path2 path3 path4 . Another problem here is that when the user presses forward / backward, after that we get only the initial end hooks, i.e. path3 , so we got stuck again and thought we were doing it wrong.
Should we try recursively telling him to boot from the end of the route back to the root module4(path4) > module3(path 3) > module(path 2) > module1(path 1) OR , if we find out a mechanism to instruct each module about the paths you need to do down path 1 > path 2 > path 3 > path 4