如何使用Durandal的createChildRouter [英] How to use Durandal's createChildRouter
问题描述
我整天都在努力，无法弄清楚如何在基于热毛巾的（MVC4 SPA）项目中使用Durandal正确创建子路由器。这是我目前所拥有的：
shell.js
var路由= [
{路由：，moduleId： home，标题： Home，导航：1}，
{路由： inventory / index，moduleId： inventory /库存，标题：库存，导航：2}]；
return router.makeRelative（{moduleId：'viewmodels'}）//路由器将在此处查找约定的视图模型
.map（routes）//映射路线
.buildNavigationModel（）/ /查找所有导航路线，并为它们做好准备
.activate（）; //激活路由器
inventory.js
define（['services / logger'，'plugins / router']，function（logger，router）{
var title ='Details';
var childRouter = router.createChildRouter（）
.makeRelative（{
moduleId：'viewmodels / inventory'，
fromParent：true
}）。map（[
{ ：''，moduleId：'库存'，标题：'库存'，导航：3}，
{路线：'items'，moduleId：'items'，标题：'Items'，导航：4}]）
.buildNavigationModel（）;
var vm = {
路由器：childRouter，
激活：激活，
标题：标题
};
return vm;
//＃region内部方法
函数activate（）{
logger.log（title +'View Activated'，null，title，true ）;
}
//＃endregion
}）；
我目前遇到的问题：
- 单击库存视图两次，我会激活
- 没有其他导航选项可见，尽管在右上角出现了一些空的3D圆角矩形...我'不确定是不是进度条无法消失还是导航元素失败。
我的项目文件是这样组织的：
我的主要问题是我希望显示子导航菜单，而未在我的视图或viewmodel中实现子导航。我不知道子级导航不是现有导航所固有的。这是我必须进行的更改。
通过添加具有 data的元素来更改我的stock.html文件以用作子导航容器-在，它将拾取并显示 child 导航菜单；还包括一个元素，该元素在 router.navigationModel 上绑定路由器上具有 data-bind ，它将在以下位置拾取叶节点（页面内容）最低导航级别：
< section>
< header>
< h2 class = page-title data-bind = text：title>< / h2>
< nav class = pull-left>
< ul class = nav nav-pills nav-stacked data-bind = foreach：router.navigationModel（）>
< li>< a data-bind = css：{active：isActive}，attr：{href：hash}，text：title
href =＃>< / a< / li>
< / ul>
< / nav>
< / header>
< section id = inventoryPane data-bind = router：{过渡：入口，cacheViews：true}>< / section>
< / section>
注意实际上，此处的完全导航视图涉及3个模块。 shell.js是具有顶级导航功能的根目录，然后清单（例如）将是另一个带有子导航按钮的容器，最后，items.js（例如）将代表在清单.js容器中显示的内容。 / p>
接下来，我需要更新我的stock.js以充当容器，并在对makeRelative的调用中指定模块的标准路径（发布后已将其删除）我所质疑的代码是许多绝望实验之一）；如果您没有正确使用moduleId，则尝试访问不存在的对象的router属性时将发生致命错误，并且如果您运行的是IE，调试器给出的消息根本没有帮助：
define（['services / logger'，'plugins / router']，function（logger，router）{
var title ='库存';
var childRouter = router.createChildRouter（）
.makeRelative（{
moduleId：'viewmodels / inventory'，
fromParent：true
}） .map（[
{route：'items'，moduleId：'items'，title：'Items'，nav：3}]）
.buildNavigationModel（）;
var vm = {
路由器：childRouter，
激活：激活，
标题：title
};
return vm;
// #region内部方法
函数activate（）{
logger.log（title +'View Activated'，null，title，true）;
}
//＃endregion
}）;
接下来，我似乎不得不更新根级路由上的哈希值，以避免出现有关找不到*库存路线。我不知道为什么自动无法更好地处理摔跤路线；淘汰赛样本以某种方式解决了这个问题，但我不能不忽略哈希值：
var route = [
{route：''，moduleId：'home'，标题：'Home'，导航：1}，
{route：'inventory * inventory'，moduleId：'inventory'，标题：'Inventory'，哈希值： #inventory，导航：2}];
最后，我不得不重组我的树以将清单文件上移：
I have struggled all day unable to figure out how to properly create a child router using Durandal in my hot towel-based (MVC4 SPA) project. This is what I have at the moment:
shell.js
var routes = [
{ route: '', moduleId: 'home', title: 'Home', nav: 1 },
{ route: 'inventory/index', moduleId: 'inventory/inventory', title: 'Inventory', nav: 2 }];
return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
.map(routes) // Map the routes
.buildNavigationModel() // Finds all nav routes and readies them
.activate(); // Activate the router
inventory.js
define(['services/logger', 'plugins/router'], function (logger, router) {
var title = 'Details';
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels/inventory',
fromParent: true
}).map([
{ route: '', moduleId: 'inventory', title: 'Inventory', nav: 3 },
{ route: 'items', moduleId: 'items', title: 'Items', nav: 4 }])
.buildNavigationModel();
var vm = {
router: childRouter,
activate: activate,
title: title
};
return vm;
//#region Internal Methods
function activate() {
logger.log(title + ' View Activated', null, title, true);
}
//#endregion
});
The problems I currently have:
- Inventory view is activated twice when I click on it
- No further navigation options become visible, although some empty 3D rounded rectangle appears in the upper right... I'm not sure if that's a progress bar that failed to go away or some failed navigation element.
My project files are organized like this:
My main problem was that I was expecting child navigation menus to show up without having implemented child navigation in my view or viewmodel. I wasn't aware that child navigation wasn't intrinsic to the existing navigation. Here are the changes I had to make.
Change my inventory.html file to act as the child navigation container by adding an element with a data-bind on router.navigationModel, which picks up and displays the child navigation menu; also include an element with a data-bind on router which will pick up the leaf node (page content) at the lowest navigation level:
<section>
<header>
<h2 class="page-title" data-bind="text: title"></h2>
<nav class="pull-left">
<ul class="nav nav-pills nav-stacked" data-bind="foreach: router.navigationModel()">
<li><a data-bind=" css: { active: isActive }, attr: { href: hash }, text: title"
href="#"></a></li>
</ul>
</nav>
</header>
<section id="inventoryPane" data-bind="router: { transition: 'entrance', cacheViews: true }"></section>
</section>
Note There are actually 3 modules involved in a fully navigated view here. shell.js is the root with the top level navigation, then inventory.js (for example) would be another container with child navigation buttons, and finally items.js (for example) would represent content displayed in the inventory.js container.
Next, I needed to update my inventory.js to act as a container and specify the fully qualified path for the module in my call to makeRelative (which I had removed after posting the code in my question as one of many desperate experiments); if you don't get the moduleId right, fatal errors will occur when trying to access the router property of a non-existent object, and the message given by the debugger is not at all helpful if you're running IE:
define(['services/logger', 'plugins/router'], function (logger, router) {
var title = 'Inventory';
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels/inventory',
fromParent: true
}).map([
{ route: 'items', moduleId: 'items', title: 'Items', nav: 3 }])
.buildNavigationModel();
var vm = {
router: childRouter,
activate: activate,
title: title
};
return vm;
//#region Internal Methods
function activate() {
logger.log(title + ' View Activated', null, title, true);
}
//#endregion
});
Next it seems I had to update the hash on my root level routing to avoid an error about the "*inventory" route not being found. I don't know why splat routes aren't handled better automatically for me; somehow the knockout samples got around this problem, but I could not without overriding the hash:
var routes = [
{ route: '', moduleId: 'home', title: 'Home', nav: 1 },
{ route: 'inventory*inventory', moduleId: 'inventory', title: 'Inventory', hash:"#inventory", nav: 2 }];
And finally, I had to restructure my tree to move the inventory files up one level:
这篇关于如何使用Durandal的createChildRouter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
