Nhiều cấp độ định tuyến trong Durandal

Question

Tôi đang xem các mẫu Durandal đang cố gắng hiểu cách định tuyến hoạt động.

Các shell.js quy định cụ thể các đường bay:

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

dưới knockout-samples:

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

Những gì tôi đang cố gắng để đạt được có thứ bậc khác dưới helloWorld. Một cái gì đó như thế này:

tôi đã cố gắng này, nhưng không may mắn:

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

Tuy nhiên, điều này không làm việc.

Định tuyến Durandal không hỗ trợ cấp điều hướng này không?

Answer 1

Nếu bạn đang sử dụng durandal 2.0, bạn có thể thiết lập bộ định tuyến con. Điều này sẽ cho phép bạn tạo một bộ định tuyến mới trong thế giới hello mà bạn có thể chuỗi thông tin bổ sung cho các chế độ xem phụ trong chế độ xem của bạn. Bạn có thể tìm kiếm những lên trên các tài liệu nhưng chắc chắn rằng bạn đã thiết lập rằng router trong tầm nhìn nên khi bạn nhấn một tuyến đường như

#helloworld/subview 

bạn đã kích hoạt helloworld

Answer 2

Để có được nhiều hơn một chuyển hướng cấp I đang thực hiện việc này:

Bộ định tuyến chỉ có khả năng là bộ định tuyến gốc để có acces cho các bộ định tuyến con, mỗi khi tôi tạo bộ định tuyến con, tôi lưu nó trên một mô-đun. Sau đó, khi tôi muốn tạo một cấp độ khác, tôi nhận được bộ định tuyến con từ mô-đun và gọ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 
    }; 
}); 

Tôi hy vọng điều này sẽ giúp ích cho bạn.

Answer 3

Khi tạo bộ định tuyến con 'cháu' hoặc 'cháu lớn' hoặc sâu hơn, mẹo là tham chiếu bộ định tuyến gốc tương đối chứ không phải bộ định tuyến gốc. Để có được một tham chiếu đến bộ định tuyến mẹ, hãy thêm mô-đun có chứa bộ định tuyến mẹ làm phụ thuộc vào mô-đun 'cháu của bạn'. Bạn có thể lồng các bộ định tuyến như thế này vô thời hạn. Ví dụ:

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

} 

Hy vọng rằng sẽ giúp!

Answer 4

Tôi đã thêm đứa trẻ làm tham chiếu đến chính bộ định tuyến gốc.Có lẽ một chút lén lút, nhưng làm việc vui vẻ:

Lên trên mức 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 Child

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

Cháu 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; 
}); 

Hy vọng rằng sẽ giúp.