Durandal中的多级路由

Question

我正在查看试图了解路由如何工作的Durandal示例。

的shell.js指定了这些路线：

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

下knockout-samples：

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

我想实现是有另一种层次结构下helloWorld。事情是这样的：

我试过，但没有运气：

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

但是，这是行不通的。

Durandal路由不支持此级别的导航吗？

Answer 1

如果您使用的是durandal 2.0，您可以设置子路由器。这将允许您在hello世界下创建一个新路由器，您可以链接其他信息以查看视图中的子视图。你可以看看这些向上的文档，但请务必设置视图内的路由器，所以当你打像

#helloworld/subview 

路线您已经激活的HelloWorld

Answer 2

获得超过一个导航I级这样做：

唯一的访问路由器是根路由器，所以要访问子路由器，每当我创建一个子路由器，我把它存储在一个模块。 然后，当我想创建另一个级别时，我从模块中获取子路由器并调用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 
    }; 
}); 

我希望这会帮助你。

Answer 3

当创建'孙子'或'孙子'或更深的孩子路由器时，技巧是引用相对父路由器，而不是根路由器。要获得对父路由器的引用，请将包含父路由器的模块作为依赖项添加到“grandchild”模块中。你可以无限期地嵌套路由器。例如：

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

} 

希望帮助！

Answer 4

我添加了孩子作为父路由器本身的参考。也许有点偷偷摸摸，但令人高兴的工作：

顶级路由器

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

子路由器

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

孙子路由器

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

希望有所帮助。