Durandal Subrouting(Hottowel)

Question

基本上,我试图在菜单中创建一个菜单.因此,在主菜单路线中,将有一个带有另一组路线的垂直菜单.单击子菜单路径时,只会更新页面的一部分,并且不会重新加载垂直菜单.我猜它会类似于这个KO小提琴http://jsfiddle.net/dPCjM/,但是在主路径视图中需要另一组"ghost"KO指令:

 <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
 <!--/ko-->

和durandal路由器上的一些其他配置......

编辑:并澄清,我不是要尝试在其中一个主菜单项中创建一个下拉列表.我正在尝试在其中一个视图中创建一个菜单.基本上是durandal应用程序内的durandal应用程序:)

IFRAMES？:))))))))))

Answer 1

编辑

从Durandal.js 2.0开始,路由器插件现在有一个内置的子路由器,允许开箱即用的深层链接.

/编辑

以下答案持续至durandal 1.2

durandal路由器插件是sammyjs的包装器.

路由器插件允许您控制浏览器历史记录堆栈,还可以让您的水疗中心链接到水疗中心的页面.

很容易让它连接1级深度,你有1个主菜单和交换进出的页面.但是,如果你想有一个子菜单瓦特/在主菜单中,并提供深层链接.

当路由器排队等待交换视图时,viewmodel激活器首先检查请求是否针对 viewmodel中的同一页面.如果它是相同的视图,那么您可以在它发生之前取消路由.通过在调用同一页面时取消路由,可以获取路由参数并自行处理子路由.

检查调用同一页面的方法是否在调用的viewmodel中areSameItem.您可以通过调用以下方法在主视图模型中覆盖此方法:

return App = {
  router: router,
  subPage: ko.observable('defaultSubPage'),
  activate: function () {
     router.activeItem.settings.areSameItem = function (currentItem, newItem, data) {
        if (currentItem != newItem) { return false; }
        else { App.subPage(convertSplatToModuleId(data.splat)); return true; }
     }
  }
}

当然这是一个amd模块,router是durandal路由器插件.convertSplatToModuleId是一个获取splat属性的函数,该属性是路径值,并将其转换为您希望显示的子页面的模块.

所以,那部分很容易,但还有一件事需要做.

<div data-bind="compose: { model: subPage, afterCompose: router.afterCompose }"></div>

您对subPages容器的绑定需要调用,router.afterCompose因为这是告诉路由器路由已完成并准备好处理新路由的原因.

这不是一个容易解释的任务.所以,我创建了一个示例并将其推送到github.