Durandal嵌套视图组合

我们正在尝试使用Durandal JS构建SPA应用程序作为概念，我们的布局中有顶部导航面板和装载SPA内容的主容器。在其中一种观点中，我们留下了带有导航的侧面板，导航应该只改变同一视图的右侧面板。我知道你是Durandal 2.0中的孩子，但我无法实现我的目标。点击顶部面板应该改变主容器（在顶部有拖曳标签），但在第二个标签上，在加载视图的左侧有额外的子导航我无法弄清楚如何让Durandal只改变右侧面板同样的看法。我并不是要求代码不是具体实现，而是要求有关如何实现这一点的概念或理论指导。Durandal嵌套视图组合

我甚至尝试使用durandal 2.0内的区域，但这似乎与我想要得到的结果不同。

来源

2013-09-27 Rati_Ge

你需要包括你已经尝试什么样的代码。你解释的很简单。 –

你是指JS项目的部分或HTML部分？让我准备样品，因为我不能直接复制/粘贴项目代码。顺便说一下，我们最初的想法是让ko.observable ActiveView将modulID定义为其属性，然后将该属性绑定到子视图外。你认为这是个好主意吗？ –

样本是个好主意。我发现，通常，当我遇到困难时，如果我在一个孤立的例子中重现我的问题，我会发现它 - 更容易清楚地看到问题所在。 –

如果您返回Durandal网站，请下载HTML samples.zip文件。消灭那个坏男孩，你会看到ko样品正在做你正在寻找的东西。

（从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'; 
      }); 
     }) 
    }; 
});

来源

2013-09-27 21:08:13 Excommunicated

这与我想达到的目标非常接近，但有一件事我不明白。视图组合在这种情况下如何工作？ Durandal知道如何在右侧面板而不是主要容器中加载内容？ –

我想我找到了我正在寻找的东西，因为在Ko样本的index.html文件中有一些非常有用的东西<！ - ko router：{transition：'entrance'，cacheViews：true} - >。是否让子视图在左侧面板中加载？ –

你能证实我的悲伤是对的吗？ –

Durandal嵌套视图组合

回答

相关问题