Durandal 중첩 뷰 구성

Question

Durandal JS를 개념으로 사용하여 SPA 응용 프로그램을 빌드하려고합니다. 여기에는 SPA 컨텐츠가로드되는 기본 탐색 패널과 기본 컨테이너가있는 레이아웃이 있습니다. 보기 중 하나에서 우리는 같은보기의 오른쪽 패널 만 변경해야하는 탐색 기능을 사이드 패널에 남겨 둡니다. 나는 네가 Durandal 2.0 안에서 아이를 배신했다는 것을 알고 있지만, 나는 나의 목표가 무엇인지 성취 할 수 없다. 상단 패널을 클릭하면 메인 컨테이너가 바뀌어야합니다 (상단에 견인 탭이 있음). 두 번째 탭에는로드 된 뷰의 왼쪽에 추가 하위 탐색이 있습니다. Durandal을 오른쪽 패널 만 변경하는 방법을 알아낼 수 없습니다. 같은보기. 구체적인 구현을위한 코드가 아니라 구현 방법에 대한 개념이나 이론적 인 지침을 요구합니다.

durandal 2.0의 영역을 사용하여 시도해 보았지만 결과적으로 얻고 자하는 것과는 다른 것으로 보입니다.

Answer 1

Durandal 사이트로 돌아 가면 HTML samples.zip 파일을 다운로드하십시오. 그 나쁜 소년을 불 태워라. 그러면 코 샘플이 당신이 찾고있는 것을 정확하게하고있는 것을 볼 것이다.

(KO로 샘플 폴더에서하는 index.js 파일의 복사)

define(['plugins/router', 'knockout'], function(router, ko) { 
    var childRouter = router.createChildRouter() 
     .makeRelative({ 
      moduleId:'ko', 
      fromParent:true 
     }).map([ 
      { route: '',    moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro' }, 
      { route: 'helloWorld',  moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro',  nav: true}, 
      { route: 'clickCounter', moduleId: 'clickCounter/index',  title: 'Click Counter',   type: 'intro',  nav: true}, 
      { route: 'simpleList',  moduleId: 'simpleList/index',  title: 'Simple List',   type: 'intro',  nav: true }, 
      { route: 'betterList',  moduleId: 'betterList/index',  title: 'Better List',   type: 'intro',  nav: true}, 
      { route: 'controlTypes', moduleId: 'controlTypes/index',  title: 'Control Types',   type: 'intro',  nav: true }, 
      { route: 'collections',  moduleId: 'collections/index',  title: 'Collection',   type: 'intro' ,  nav: true }, 
      { route: 'pagedGrid',  moduleId: 'pagedGrid/index',  title: 'Paged Grid',   type: 'intro',  nav: true }, 
      { route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro',  nav: true }, 
      { route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor',  type: 'detailed', nav: true }, 
      { route: 'gridEditor',  moduleId: 'gridEditor/index',  title: 'Grid Editor',   type: 'detailed', nav: true }, 
      { route: 'shoppingCart', moduleId: 'shoppingCart/index',  title: 'Shopping Cart',   type: 'detailed', nav: true }, 
      { route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client',  type: 'detailed', nav: true} 
     ]).buildNavigationModel(); 

    return { 
     router: childRouter, 
     introSamples: ko.computed(function() { 
      return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
       return route.type == 'intro'; 
      }); 
     }), 
     detailedSamples: ko.computed(function() { 
      return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
       return route.type == 'detailed'; 
      }); 
     }) 
    }; 
});