编辑
从 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。