Ove*_*lew 8 durandal hottowel durandal-navigation
我正在构建一个应用程序,并希望显示一个2层菜单,两个层都始终可用.Durandal 2.0 推出了新的路由器,它支持"子路由器",可以更容易地进行深度链接.
我的问题 - 我可以永久加载我的'子级'导航路径(以及父级未处于活动状态时呈现的子菜单),或者是"子路由器"设计旨在延迟加载它们以在深层链接到达时评估它们被评估？
Durandal示例显示主导航寄存器是一个splat路由,然后当加载/激活该视图模型时,子路由器被注册.
例如:在Durandal 2.0提供的示例中,mian nev已注册 shell.js
router.map([
{ route: ['', 'home'], moduleId: 'hello/index', title: 'Validation test', nav: true },
{ route: 'knockout-samples*details', moduleId: 'ko/index', title: 'Knockout Samples', nav: true, hash: '#knockout-samples' }
]).buildNavigationModel()
.activate();
然后ko/index.js视图模型注册孩子(上activate())
var childRouter = router.createChildRouter()
.makeRelative({
moduleId:'ko',
fromParent:true
}).map([
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true},
{ route: 'clickCounter', moduleId: 'clickCounter/index', title: 'Click Counter', type: 'intro', nav: true}
]).buildNavigationModel();
而我想在一个地方定义我的路线,例如:
var routes = [
{ route: ['', 'home'],
moduleId: 'hello/index',
title: 'Validation test',
nav: true },
{ route: 'knockout-samples*details',
moduleId: 'ko/index',
moduleRootId: 'ko', // Custom property to make child routes easier
title: 'Knockout Samples',
nav: true,
hash: '#knockout-samples',
childRoutes: [
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true},
{ route: 'clickCounter', moduleId: 'clickCounter/index', title: 'Click Counter', type: 'intro', nav: true}
]}
])
我正在努力的部分是注册子路线,并在导航到他们时让它们正确评估.(渲染菜单会稍后...)
// Load routes router.map(routes.navRoutes).buildNavigationModel().mapUnknownRoutes(function(instruction)
{
logger.logError('No Route Found', instruction.fragment, 'main', true);
});
// Try load child routes...
$.each(routes.navRoutes, function(index, parentRoute) {
if (!parentRoute.childRoutes) {
return;
}
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: parentRoute.moduleRootId,
fromParent: true // also tried false + non-splat routes...
}).map(parentRoute.childRoutes).buildNavigationModel();
});
我在使这个导航渲染时遇到了各种错误.尝试计算哈希值时(或者来自未激活的父项或子项),大多数内部router.js错误 - 所以所有哈希都已定义.
一旦我得到它来映射导航,子路径似乎不可访问 - 他们只是加载主splat页面没有错误.
所以我想知道我是否正确地采用这种方式？(预先注册所有子路线,目标是即将呈现2层菜单).
我认为后备使用类似于Durandal 1.2的关于子路由的答案,使用平面路由注册,自定义'isSameItem'函数和计算的可观察量的组合来呈现2层导航.
Krz*_*lak 14
我希望我可以帮助你一点.
您可以永久加载"子"路由器吗？
据我所知,你不能(或者更确切地说,没有简单的方法来实现这一目标).子路由器旨在为特定视图提供子路由功能 - 您可以将它们视为Durandal视图中的Durandal导航.如果我们检查Durandal页面上的示例代码,我们可以很容易地看到子路由生命周期与给定视图相关联.更重要的是,如果我们检查创建子路由的函数代码,我们将看到它创建新的路由器并且只存储对父路由器的引用 - 父路由器(在大多数情况下是主路由器)没有对其子路由的引用
router.createChildRouter = function() {
var childRouter = createRouter();
childRouter.parent = router;
return childRouter;
};
在主路由器中实现多级路由可以做些什么？
我过去遇到了类似的问题,但是使用了旧版Durandal.对于这个问题,我从头开始你给了一点修改它 - 我摆脱了splat路由,因为它打算使用子路由,我的解决方案不会使用它们.
var routes = [
{
route: ['', 'home'],
moduleId: 'viewmodels/home',
title: 'Validation test',
nav: true
},
{
route: 'knockout-samples',
moduleId: 'viewmodels/ko/index',
moduleRootId: 'viewmodels/ko', // Custom property to make child routes easier
title: 'Knockout Samples',
nav: true,
hash: '#knockout-samples',
childRoutes: [
{ route: 'simpleList', moduleId: 'simpleList', title: 'SimpleList', nav: true, hash : 'simpleList' },
{ route: 'clickCounter', moduleId: 'clickCounter', title: 'Click Counter', nav: true, hash : 'clickCounter' }
]
}
];
下一步是将这个用户友好的定义转换为可以在主路由器中轻松注册的路由表.
$.each(routes, function(index, route) {
if (route.childRoutes === undefined)
return
$.each(route.childRoutes, function(index, childRoute) {
childRoute.route = route.route + '/' + childRoute.route;
childRoute.moduleId = route.moduleRootId + '/' + childRoute.moduleId;
childRoute.title = route.title + '/' + childRoute.title;
childRoute.hash = route.hash + '/' + childRoute.hash;
childRoute.parent = route.moduleRootId;
});
routes = routes.concat(route.childRoutes);
});
最后一步是标准注册路由器并激活它.
return router.map(routes)
.buildNavigationModel()
.activate();
如何渲染寄存器路由以保留多级布局？
我的代码适用于Bootstrap 2.3.0并将多级菜单渲染为下拉按钮.当路线没有子路线(所以只是简单的路线)并且没有父路线(它的第一级导航)时,它被渲染为简单的按钮.如果路由具有子路由,则将其呈现为下拉按钮,并将子路由添加到下拉列表中.
<div class="btn-group" data-bind="foreach: router.navigationModel">
<!-- ko if: $data.childRoutes === undefined && $data.parent === undefined -->
<a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
<!-- /ko -->
<!-- ko if: $data.childRoutes !== undefined -->
<div class="btn-group btn-info">
<a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"/>
</button>
<ul class="dropdown-menu" data-bind="foreach: childRoutes">
<a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
</ul>
</div>
<!-- /ko -->
</div>
样式可能需要进行点润处理,但整体逻辑已经完成.