Più livelli di routing in Durandal

Question

Sto guardando i campioni Durandal cercando di capire come funziona il routing.

I shell.js specifica questi percorsi:

{ route: ['', 'knockout-samples*details'], moduleId: 'ko/index', title: 'Details...', nav: true, hash: '#knockout-samples' }, 
{ route: 'view-composition',moduleId: 'viewComposition/index', title: ... 

sotto knockout-samples:

{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' }, 
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: intro', nav: true}, 

Quello che sto cercando di realizzare è avere un'altra gerarchia sotto helloWorld. Qualcosa di simile a questo:

Ho provato a farlo, ma senza fortuna:

{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' }, 
{ route: 'helloWorld*details', moduleId: 'helloWorld/index', title: 'Hello World',   type: 'intro',  nav: true, hash:'#knockout-samples/helloWorld'} 

Tuttavia, questo non sta funzionando.

Il routing Durandal non supporta questo livello di navigazione?

Answer 1

Se si utilizza durandal 2.0, è possibile impostare il router figlio. Ciò ti consentirà di creare un nuovo router in Hello World che puoi concatenare su informazioni aggiuntive per le viste secondarie nella tua vista. Si può guardare questi in su sui documenti, ma fare in modo di impostare quel router all'interno della vista in modo che quando si colpisce un percorso come

#helloworld/subview 

si è già attivato helloworld

Answer 2

Per ottenere più di un livello di navigazione I Sto facendo questo:

L'unico router accessibile è il router di root in modo da avere accesso ai router figlio, ogni volta che sto creando un router figlio, lo memorizzo su un modulo. Quindi, quando voglio creare un altro livello, ottengo il router figlio dal modulo e chiamo createChildRouter.

define([], function() { 
    return { 
     root: null, 
     level1: null, 
     level2: null 
    }; 
}); 

define(['plugins/router', 'routers'], function (router, routerContainer) { 
    var childRouter = router.createChildRouter() 
     .makeRelative({ 
      moduleId: 'viewmodels/companyplussplat', 
      //fromParent: true 
      route: 'company' 
     }).map([ 
      { route: 'order/:orderID', moduleId: 'orderdetail', title: 'Order', nav: false }, 
      { route: 'order/:orderID*details', moduleId: 'orderdetailplussplat', title: 'Order plus splat', nav: false } 
     ]).buildNavigationModel(); 

    routerContainer.level1 = childRouter; 

    return { 
     activate: function() { 
      console.log("Activating company plus splat"); 
     }, 
     deactivate: function() { 
      console.log("Deactivating company plus splat"); 
     }, 
     router: childRouter 
    }; 
}); 

define(['plugins/router', 'routers'], function (router, routerContainer) { 
    //debugger; 
    var childRouter = routerContainer.level1.createChildRouter() 
     .makeRelative({ 
      moduleId: 'orderteailplussplat', 
      //fromParent: true 
      route: 'company/order/:orderID' 
     }).map([ 
      { route: 'orderline/:orderlineID', moduleId: 'orderlinedetail', title: 'Order line detail', nav: false }, 
     ]).buildNavigationModel(); 

    routerContainer.level2 = childRouter; 

    return { 
     activate: function (orderID) { 
      console.log('Activating order detail for: '+ orderID +' plus splat'); 
     }, 
     deactivate: function() { 
      console.log('Deactivating order detail plus splat'); 
     }, 
     router: childRouter 
    }; 
}); 

Spero che questo ti possa aiutare.

Answer 3

Quando si crea un "nipote" o un "pronipote" o un router figlio più profondo, il trucco è fare riferimento al router principale relativo, non al router di root. Per ottenere un riferimento al router principale, aggiungi il modulo che contiene il router genitore come dipendenza dal modulo 'nipote'. È possibile nidificare i router in questo modo indefinitamente. Ad esempio:

myModuleWithChildRouter.js

define(['plugins/router'], //reference to durandal root router 
    function(router) {   

      var _childRouter = router.createChildRouter(); 

      return { myNewChildRouter: _childRouter} 
} 

myModuleWithGrandchildRouter.js

define(['myModuleWithChildRouter'], //reference to module with child router 
    function(childRouterModule) {   

      var _grandChildRouter = childRouterModule.myNewChildRouter.createChildRouter(); 
      ..... 

} 

Speranza che aiuta!

Answer 4

Ho aggiunto il figlio come riferimento al router principale stesso.Forse un po 'subdolo, ma lavorando felicemente:

livello superiore router

define(["plugins/router"], function (router) { 
    // create the constructor 
    var ctor = function() { 
    }; 

    ko.utils.extend(ctor.prototype, { 
     activate: function() { 
      //var self = this; 
      var map = router.makeRelative({ moduleId: "viewmodels" }).map([ 
       { route: "", moduleId: "index", title: "Overview", nav: true, hash: "#/", enabled: true }, 
       { route: "data*details", moduleId: "data/shell", title: "Data Loading", nav: true, hash: "#/data", enabled: false }, 
       { route: "reporting*details", moduleId: "reporting/shell", title: "Reporting", nav: true, hash: "#/reporting", enabled: true }, 
       { route: "query*details", moduleId: "query/shell", title: "Query", nav: true, hash: "#/query", enabled: true }, 
       { route: "login", moduleId: "login", title: "Login", hash: "#/login", state: "out" } 
      ]); 

      return map.buildNavigationModel() 
       .mapUnknownRoutes("404") 
       .activate(); 
     }); 

    }); 

    return ctor; 
}); 

router Bambino

define(["plugins/router"], function (router) { 
    var childRouter = router.createChildRouter() 
      .makeRelative({ 
       moduleId: "viewmodels/reporting", 
       fromParent: true 
      }).map([ 
       { route: "", moduleId: "index", title: "Reporting", nav: false, hash: "#/reporting" }, 
       { route: "standard", moduleId: "standard", title: "Standard Reports", nav: true, hash: "#/reporting/standard" }, 
       { route: "alert*details", moduleId: "alert/shell", title: "Alerts", nav: true, hash: "#/reporting/alert" } 
      ]).buildNavigationModel(); 

    // for alerts 
    router.child = childRouter; 

    var vm = { 
     router: childRouter 
    }; 

    return vm; 
}); 

Nipotini router

define(["plugins/router"], function (router) { 
    var grandchildRouter = router.child.createChildRouter() 
     .makeRelative({ 
      moduleId: "viewmodels/reporting/alert", 
      fromParent: true 
     }).map([ 
      { route: "", moduleId: "index", title: "Alerts", hash: "#/reporting/alert" }, 
      { route: ":id", moduleId: "case", title: "Alert Details", hash: "#/reporting/alert" } 
     ]).buildNavigationModel(); 

    var vm = { 
     router: grandchildRouter 
    }; 

    return vm; 
}); 

Speranza che aiuta.