Mehrere Ebenen des Routings in Durandal

Question

Ich schaue auf die Durandal Proben versuchen zu verstehen, wie Routing funktioniert.

Die shell.js spezifiziert diese Routen:

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

unter knockout-samples:

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

Was ich eine anderen Hierarchie unter helloWorld zu erreichen versuchen, ist zu müssen. Etwas wie folgt aus:

ich diesen aber kein Glück versucht:

{ 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'} 

Dies ist jedoch nicht funktioniert.

Unterstützt das Durandal-Routing diese Navigationsebene nicht?

Answer 1

Wenn Sie durandal 2.0 verwenden, können Sie den untergeordneten Router einrichten. Dadurch können Sie einen neuen Router unter der Hallo-Welt erstellen, den Sie für zusätzliche Informationen für Unteransichten in Ihrer Ansicht verketten können. Sie können diese aussehen auf die Dokumentation, aber stellen Sie sicher, dass die Router innerhalb der Ansicht so eingerichtet, wenn Sie eine Route treffen wie

#helloworld/subview 

Sie bereits Hello World

Answer 2

Um mehr als eine Navigationsebene I aktiviert haben mache das:

Der einzige Access Router ist der Root-Router, so dass Zugriff auf die Kind-Router, jedes Mal, wenn ich einen Kind-Router erstellen, ich es auf einem Modul speichern. Dann, wenn ich eine andere Ebene erstellen möchte, bekomme ich den Kind-Router aus dem Modul und craveChildRouter aufrufen.

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 
    }; 
}); 

Ich hoffe, das wird Ihnen helfen.

Answer 3

Bei der Erstellung eines "Enkel" - oder "Urenkel" - oder eines tieferen Kind-Routers besteht der Trick darin, den relativen übergeordneten Router und nicht den Root-Router zu referenzieren. Um einen Verweis auf den übergeordneten Router zu erhalten, fügen Sie das Modul, das den übergeordneten Router enthält, als Abhängigkeit von Ihrem übergeordneten Modul hinzu. Sie können Router auf unbegrenzte Zeit verschachteln. Zum Beispiel:

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(); 
      ..... 

} 

Hoffnung, das hilft!

Answer 4

Ich habe das Kind als Referenz auf den übergeordneten Router selbst hinzugefügt.Vielleicht ein bisschen hinterhältig, aber die Arbeit glücklich:

Top-Level-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; 
}); 

Kinder Router

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; 
}); 

Enkel-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; 
}); 

Hoffnung, das hilft.