javascript - 如何使用Durandal的createChildRouter

Question

我一整天都在苦苦挣扎，无法弄清楚如何在我的基于 Hot Towel 的 (MVC4 SPA) 项目中使用 Durandal 正确创建子路由器。这就是我现在所拥有的:

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

库存.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
});

我目前遇到的问题:

1. 当我点击库存 View 时，它会被激活两次
2. 虽然右上角出现了一些空的 3D 圆 Angular 矩形，但没有显示更多导航选项...我不确定这是否是未能消失的进度条或某些失败的导航元素。

我的项目文件是这样组织的:

Answer 1

我的主要问题是，我期望子导航菜单能够显示，而没有在我的 View 或 View 模型中实现子导航。我不知道子导航不是现有导航所固有的。以下是我必须做出的更改。

通过在 router.navigationModel 上添加带有 data-bind 的元素，将我的 inventory.html 文件更改为充当子导航容器，该元素拾取并显示子导航菜单；还包括一个在 router 上带有 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: { transition: 'entrance', cacheViews: true }"></section>
</section>

注意这里的完全导航 View 实际上涉及 3 个模块。 shell.js 是具有顶级导航的根，然后 inventory.js(例如)将是另一个带有子导航按钮的容器，最后 items.js(例如)将表示 inventory.js 容器中显示的内容。

接下来，我需要更新 inventory.js 以充当容器，并在调用 makeRelative 时指定模块的完全限定路径(我在问题中发布代码后将其删除，作为许多绝望实验之一) )；如果你没有正确获取 moduleId，当尝试访问不存在的对象的 router 属性时将会发生 fatal error ，并且如果你运行 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
});

接下来，我似乎必须更新根级路由上的哈希值，以避免出现有关找不到“*inventory”路由的错误。我不知道为什么 splat 路线没有为我更好地自动处理；不知怎的，淘汰样本解决了这个问题，但我不能不覆盖哈希:

var routes = [
    { route: '', moduleId: 'home', title: 'Home', nav: 1 },
    { route: 'inventory*inventory', moduleId: 'inventory', title: 'Inventory', hash:"#inventory", nav: 2 }];

最后，我必须重组我的树以将库存文件上移一级: