Marionette regioni profondamente annidate con routing

Question

Abbiamo modularised la nostra applicazione di marionette in modules. Tuttavia ora siamo a una perdita completa su come gestire i diversi punti di ingresso dal router e ripristinare lo stato nelle aree corrette.

Il problema è l'applicazione è basso, le regioni sono annidati all'interno di un'altra regione ecc ecc ... (vedi schema). Ciò che rende difficile questo è che la cima non è nemmeno una linea retta, ci sono menu in ogni modulo che dettano quale altro modulo caricare sotto di esso. Semplicemente non riusciamo a capire come passare una catena di comandi o istruzioni per replicare lo stato.

Ogni modulo ha il proprio layout/area e attiva un altro modulo passando nuovamente come parametro un altro region e model.

Abbiamo essenzialmente riconosciuto 3 modi distinti in cui uno stato può entrare in vigore.

1. IN APP NAVIGAZIONE dall'alto verso il basso utilizzando i pulsanti in app
2. ROUTER quando un URL corrisponde
3. cronologia del browser quando si utilizza precedente torna pulsanti/

qualche codice

@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" 

note extra

Abbiamo giocato con Marionette.SubRouter, che ci consente di rendere modulare la definizione rotte che ogni modulo conosce solo su di esso la propria URL relativo e non sa che cosa è prima di esso. Attualmente se l'utente va a /path1/path2/path3/path4 possiamo prenderlo e impostare un gancio di innesco lungo la strada e in ordine allo path1path2path3path4. L'altro problema qui è quindi quando l'utente preme avanti/indietro, quindi dopo aver ottenuto solo i ganci terminali, cioè path3, ci siamo bloccati di nuovo qui e abbiamo pensato che stessimo sbagliando.

Dovremmo cercare di raccontare in modo ricorsivo per caricare dalla fine del percorso a ritroso alla radice module4(path4) > module3(path 3) > module(path 2) > module1(path 1)O dovremmo capire un meccanismo per istruire ogni modulo i percorsi da prendere verso il basso path 1 > path 2 > path 3 > path 4

Answer 1

Vorrei suggerire percorsi parametrizzati. Non sono abbastanza familiarità con CoffeeScript, ma ecco un esempio basato JS da una webapp sto lavorando su:

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

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

È possibile specificare i parametri di qualsiasi Uniti guidano i moduli successivi, e Marionette sa come tirare i valori (con un ':') dal percorso e passarli nella funzione. Ciò risolverebbe i tuoi valori di ricostruzione/passaggio fino a viste successive, impedendo al tempo stesso la ricorsione/propagazione.