Durandal Subrouting (热毛巾)

Question

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

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

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

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

框架？？ :)))))))))))

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 的视图模型中。您可以通过调用在主视图模型中覆盖此方法：

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 属性，即路由值，并将其转换为您希望显示的子页面的模块。

所以，这部分很简单，但还有 1 件事需要完成。

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

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

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

Answer 2

提醒那些感兴趣的人，即将发布的 Durandal js 2.0 版本加入了深度链接功能，与基于 Evan 的优秀示例滚动您自己的深度链接相比，它大大简化了操作。

查看Knockout sample 以查看它的运行情况，您可以通过Durandal js github project 从最新的二进制文件中获取它。

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