10

基本上,我正在尝试在菜单中创建一个菜单。因此,在主菜单路线中,会有一个带有另一组路线的垂直菜单。单击子菜单路由时,仅更新部分页面,垂直菜单不会重新加载。我猜它会类似于这个 KO fiddle http://jsfiddle.net/dPCjM/,但是在主路由视图中需要另一组“ghost” KO指令:

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

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

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

框架??:)))))))))))

4

2 回答 2

15

编辑

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

/编辑

以下答案适用于 durandal 1.2

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

路由器插件允许您控制浏览器历史堆栈,还使您的水疗中心能够链接到水疗中心的页面。

很容易将它链接到 1 级深度,其中您有 1 个主菜单和交换进出的页面。但是如果你想在主菜单中有一个子菜单并提供深度链接呢?

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

检查它是否调用同一页面的方法位于名为 的视图模型中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>

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

这不是一个容易解释的任务。因此,我创建了一个示例并将其推送到 github here

于 2013-04-04T23:33:51.673 回答
2

提醒那些感兴趣的人,即将发布的 Durandal js 2.0 版本已经加入了深度链接功能,这大大简化了基于 Evan 的优秀示例滚动您自己的深度链接的事情。

查看Knockout 示例以查看它的实际效果,您可以通过Durandal js github 项目从最新的二进制文件中获取该示例。

值得注意的是,它与之前的 Durandal 版本有很大的不同,因此您必须对原始的 HotTowel 模板进行一些修改以支持它,因为有许多重大更改。

于 2013-07-23T13:59:57.933 回答