修改

Question

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

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

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

编辑：为了澄清，我不打算在其中一个主菜单项中创建一个下拉列表。我正在尝试在其中一个视图中创建一个菜单。基本上是一个durandal应用程序内的durandal应用程序：）

IFRAMES ?? ：））））））））））

Answer 1

修改

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

/编辑

以下答案持续至durandal 1.2

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

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

很容易让它连接1级深度，你有1个主菜单和交换进出的页面。但是如果你想在主菜单中有一个子菜单并提供deep linking。

当路由器排队等待交换视图时，viewmodel activator首先检查视图模型中的请求is for the same page。如果它是相同的视图，那么您可以在它发生之前取消路由。通过在调用同一页面时取消路由，这允许您获取路由参数并自己处理子路由。

检查调用同一页面的方法是否在名为areSameItem的viewmodel中。您可以通过调用：

在主视图模型中覆盖此方法

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，因为这会告诉路由器路由已经完成并且已准备好处理新路由。

这不是一个容易解释的任务。所以，我创建了一个example and pushed it to github here。

Answer 2

就像那些感兴趣的人一样，即将推出的Durandal js 2.0版本已经融入了深层链接的功能，这极大地简化了基于Evan的优秀示例滚动您自己的深层链接。

查看Knockout sample以查看其中的实际操作，您可以通过Durandal js github project从最新的二进制文件中获取该文件。

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

Durandal Subrouting（Hottowel）

2 个答案:

修改

/编辑

以下答案持续至durandal 1.2