Durandal Вложенная композиция вида

Question

Мы пытаемся создать приложение SPA с использованием Durandal JS в качестве концепции, у нас есть макет, где есть верхняя панель навигации и главный контейнер, где загружается содержимое 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'; 
      }); 
     }) 
    }; 
});