基本上,我想创建一个菜单中的菜单。 所以,主菜单路线中,将有另一组路线的垂直菜单。 当在子菜单中单击航线,只有页面的一部分被更新,而垂直菜单不会重新加载。 我猜测这将是类似这样的KO小提琴http://jsfiddle.net/dPCjM/ ,但需要另一套在主路线图“鬼” KO指令:
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
和迪朗达尔路由器上其他一些CONFIGS ...
编辑:并澄清,我并不想在主菜单项来创建一个下拉列表。 我想里面创建一个视图菜单。 基本上是一个迪朗达尔应用内执行迪朗达尔应用:)
IFRAMES? :))))))))))
编辑
作为Durandal.js 2.0的路由器撑着,现在有一个内置的子路由器它允许deeplinking开箱。
/编辑
下面的答案perstains到迪朗达尔1.2
该迪朗达尔路由器插件是周围的包装sammyjs 。
路由器插件允许你控制浏览器历史堆栈,也让你的水疗中心瓦特/在你的水疗链接到页面的能力。
它很容易得到它做链接1级深,你有1个主菜单,并且换入或换出的页面。 但是,如果你想有一个子菜单瓦特/在主菜单中,并提供深层链接 。
当路由器排队交换意见的视图模型激活首先检查请求是在同一页中您的视图模型。 如果是相同的观点,那么你可以在它发生之前取消路线。 通过取消航线时,它调用同一个页面这可以让你走的路线参数和处理自己的subroute。
检查,看看如果调用同一个页面的方法是在被称为视图模型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
是迪朗达尔路由器插件。 convertSplatToModuleId
是一个函数,它的splat
属性,它是路线值,并将其转换到要显示其子页面的模块。
所以,这部分很简单,但有1两件事需要做。
<div data-bind="compose: { model: subPage, afterCompose: router.afterCompose }"></div>
您的子页面的容器结合需要调用router.afterCompose
,因为这是告诉路线已经完成了路由器和准备处理新航线。
这不是一件容易的事来解释。 所以,我创建了一个例子,它推到这里github上 。
正如抬起头来对那些有兴趣,即将到来的迪朗达尔JS 2.0版本已经出炉在功能深层链接从而大大简化了基于埃文的很好的例子滚动自己深层链接的东西。
退房的淘汰赛样本看到它在行动上,你可以从通过最新的二进制抢迪朗达尔JS github上的项目 。
值得注意的是,这是从以前的版本迪朗达尔的大幅偏离,所以你就必须做一些修改原来的HotTowel模板来支持它,因为有许多重大更改。