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 回答