【问题标题】:Where do child navigation options appear from Durandal's createChildRouter?Durandal 的 createChildRouter 中的子导航选项出现在哪里?
【发布时间】:2013-11-14 00:02:02
【问题描述】:

我正在尝试弄清楚如何正确使用 createChildRouter。在绕了一天半试图找到可以给我一些结果的代码之后,我暂时选择了以下代码(仍然没有给我结果):

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: 'index', moduleId: 'inventory', title: 'Inventory', nav: 3 },
            { route: 'inventory', 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
});

我的树结构如下所示:

由于我没有得到任何结果,我开始怀疑问题不是我的路由代码,而是我的导航菜单或对子路由器应该如何/是否应该出现和可见的感知额外的工作。我使用的是普通的香草模板(热毛巾),我唯一更改的是 router.js 中的日志记录代码,因为我试图弄清楚路由器代码正在寻找什么。当我单击按钮从“主页”视图切换到“库存”视图时,我从上面的代码(使用我修改的日志记录)得到的结果如下:

LOG: /^$/ != inventory/*index 
LOG: /^inventory\/(.*?)$/ == inventory/*index 
LOG: Activating[object Object] 
LOG: [Details] Details View Activated 
LOG: Navigation Complete[object Object][object Object] 
LOG: /^index$/ != *index 
LOG: /^inventory$/ != *index 
LOG: Route '*index' Not Found 

所以我的问题是,这是路由代码应该做的吗?是否应该无法将 splat 路由与任何子路由匹配?我需要做些什么来显示子路线的导航按钮吗?他们应该自动出现吗?我的视图确实切换到inventory.js/html,但发生这种情况时不会出现新的导航按钮。

我错过了什么?

【问题讨论】:

    标签: javascript asp.net-mvc durandal hottowel


    【解决方案1】:

    查看knockout samples 了解子路由的有效实现。如果这是您所期望的,则不会将子路线添加到主导航中。它们旨在与辅助导航一起使用。 HTML 版本可以在http://dfiddle.github.io/dFiddle-2.0/#knockout-samples 看到。

    【讨论】:

    • 您提供的链接将我带到路由器代码,但我认为我真正缺少的是辅助导航代码。你能给我一些实现二级导航的技巧吗?
    • 在同一目录中检查index.htmlintroSamplesdetailedSamples 是两个过滤的子路由器数组,将用于简单的ko foreach。不涉及魔法。顺便说一句:makeRelative 在 shell.js 中有什么用处?
    • 你猜在 shell.js 中使用 makeRelative 比我的要好。我直接从github.com/johnpapa/HotTowel/blob/master/NuGet/HotTowel/App/…的热毛巾模板中拉出来了
    • 我在 index.html 中看到的每个 foreach 都被注释掉了。请原谅我极度的菜鸟,但自从 jQuery 时代之前我就没有写过 Web 应用程序,所以我在这里一下子学到了很多东西。 cmets 的解析中是否发生了一些“魔术”?
    • 您可以考虑从learn.knockoutjs.com 开始了解淘汰赛的基础知识。当涉及到模块处理/加载和模板绑定的淘汰赛时,Durandal 委托 requirejs。为了构建 Durandal 应用程序,您需要在一定程度上熟悉这些应用程序。前往复数视觉@JohnPapa 有一些涵盖这些的好课程。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-11
    • 2011-02-14
    • 1970-01-01
    • 2013-12-20
    相关资源
    最近更新 更多