Marionetas regiones anidadas profundas con routing

Hemos modularised nuestra aplicación de marionetas en modules . Sin embargo, ahora nos encontramos con una pérdida total sobre cómo manejar los diferentes puntos de input desde el enrutador y restaurar el estado en las regiones correctas.

enter image description here

El problema es que la aplicación es de arriba hacia abajo, las regiones están anidadas dentro de otra región, etc., etc. (ver diagtwig). Lo que hace que esto sea difícil es que la parte superior hacia abajo tampoco es una línea recta, hay menus en cada module que dictan qué otro module cargar debajo de él. Simplemente no podemos entender cómo pasar una cadena de commands o instrucciones para replicar el estado.

Cada module tiene su propio layout / región y activa otro module que pasa como parámetro otra vez otra region y model .

En esencia, reconocemos 3 forms distintas en que un estado puede establecerse.

  1. EN LA APLICACIÓN NAVEGACIÓN de arriba hacia abajo usando los botones de la aplicación
  2. ROUTER cuando coincide una url
  3. HISTORIAL DEL NAVEGADOR cuando se usan botones anteriores / atrás

algún código

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

notas adicionales

Hemos jugado con Marionette.SubRouter que nos permite modularizar la definición de routes en el sentido de que cada module solo conoce su propia URL relativa y no sabe lo que está delante de ella. Actualmente, si el usuario va a /path1/path2/path3/path4 , podemos recogerlo y establecer un /path1/path2/path3/path4 activación a lo largo del path y en order en path1 path2 path3 path4 . El otro problema aquí es cuando el usuario presiona adelante / atrás, luego solo conseguimos los ganchos finales desencadenados, es decir, path3 así que nos quedamos atrapados aquí nuevamente y pensamos que estamos haciendo esto mal.

¿Deberíamos tratar de recursivamente decirle que cargue desde el final de la ruta hacia atrás al module4(path4) > module3(path 3) > module(path 2) > module1(path 1) O deberíamos descubrir un mecanismo para instruir cada module las routes para tomar hacia abajo path 1 > path 2 > path 3 > path 4

One Solution collect form web for “Marionetas regiones anidadas profundas con routing”

Sugeriría routes parametrizadas. No estoy lo suficientemente familiarizado con coffeescript, pero aquí hay un ejemplo basado en JS de una aplicación web en la que estoy trabajando:

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

Puede especificar los parameters de cualquier estado que controle los modules posteriores, y Marionette sabe cómo extraer los valores (con un ':') de la ruta y pasarlos a la function. Esto resolvería sus valores de reconstrucción / paso a vistas posteriores, mientras evita la recursión / propagación.

  • Usar marionetas para agrupar elementos en una vista de colección
  • Cómo eliminar un elemento de Selectize
  • ¿Hay algún evento de Marionette.js que se active después de que se muestren todos los elementos en un CollectionView?
  • Marionette.CompositeView, cómo pasar parameters a Marionette.ItemView
  • ¿Cuál es la diferencia entre los factores desencadenantes y los events en la networking troncal?
  • El evento keyPress no se activa en el dispositivo mobile Android
  • Permisos / ACL en una aplicación paralela de JavaScript
  • Prueba de un clic de activación desde un Backbone.View que abre un nuevo Backbone.View
  • ¿Cómo obtengo el model para la <opción> seleccionada en un Marionette.js CollectionView?
  • Hacer un model global para backbone.marionette
  • Backbone.js `model.destroy ()` transiciones personalizadas?
  • Backbone Marionette y RequireJS Módulos
  • El gráfico de Zingchart no llena el ancho del div principal
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.