Durandal의 여러 라우팅 수준

Question

라우팅이 작동하는 방식을 이해하려고하는 Durandal 샘플을보고 있습니다.

{ 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에서

shell.js는이 노선을 지정합니다. 이런 식으로 뭔가 :이하지만 행운을 시도

:

{ 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을 사용하는 경우 하위 라우터를 설정할 수 있습니다. 이렇게하면 안녕하세요 세상에서보기에 하위보기에 대한 추가 정보를 연결할 수있는 새 라우터를 만들 수 있습니다. 당신은 문서에이를 찾아 볼 수 있지만 이미 helloworld를을 활성화 한

#helloworld/subview 

같은 경로를 쳤을 때 당신이 그렇게보기 내에서 그 라우터를 설치해야합니다 수 있습니다

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'또는 'great grandchild'또는 더 깊은 자식 라우터를 만들 때 트릭은 루트 라우터가 아닌 상대 부모 라우터를 참조하는 것입니다. 상위 라우터에 대한 참조를 얻으려면 상위 라우터를 포함하는 모듈을 '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; 
}); 

희망.