knockout.js - Durandal Subrouting ( Hot Towel )

Question

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

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

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

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

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

Answer 1

编辑

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

/编辑

以下答案适用于 durandal 1.2

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

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

很容易将它链接到 1 级深度，其中您有 1 个主菜单和交换进出的页面。但是，如果您想在主菜单中有一个子菜单并提供 deep linking 怎么办？ .

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

检查它是否调用同一页面的方法位于名为 areSameItem 的 View 模型中.您可以通过调用在主视图模型中覆盖此方法:

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>

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

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