Knockout.js DurandalJS：在小部件内创建childRouter？

是否可以在小部件内创建childRouter，通过使用小部件可以在其他页面中再次使用

这是我的目录树的外观：

* app
  * views
     * dashboard (route: /dashboard)
        - dashboard.html
        - dashboard.js
     * shells
     * projects (route: /projects)
  * widgets
     * timeline
        - view.html
        - viewmodel.js
        * child
            - all.html
            - all.js
            - task.html
            - task.js

我想做的是：

在时间轴小部件中我想有几个选项卡

e.g: [ ALL ] and [ TASK ]

然后，我可以在/dashboard和/projects页面上使用该小部件

例如，如果我当前在/dashboard页面中使用该小部件，那么当我单击小部件中的任何选项卡按钮（在这种情况下，让我们假设我单击任务选项卡按钮）时，它会将当前url从“localhost/dashboard”更改为“localhost/dashboard/tasks”（不刷新页面）。然后它将在小部件内显示来自/widgets/timeline/child/tasks的视图

因此，如果我在/projects页面中使用该小部件，它会将当前url从“localhost/projects”更改为“localhost/projects/tasks”

这就是我迄今为止所尝试的：

在timeline.js内部小部件：

var parentModuleId = router.activeItem()['__moduleId__'];

var childRouter = router.createChildRouter().makeRelative({
        fromParent: true,
        moduleId: parentModuleId
    }).map([
        { route: ['all', ''], moduleId: 'widgets/timeline/child/all', title: 'Show All', nav: true },
        { route: 'tasks', moduleId: 'widgets/timeline/child/tasks', title: 'Tasks', nav: true },
    ]).buildNavigationModel();

<section>
    <div class="panel panel-default">
        <div class="panel-heading" data-bind="foreach: router.navigationModel">
            <a data-bind="attr: { href: hash, title: title }" class="btn btn-primary btn-lg">
                 <span data-bind="text: title"></span>
            </a>
        </div>
    </div>

    <div data-bind="router: { router: router }"></div>
</section>

内部timeline.html小部件：

var parentModuleId = router.activeItem()['__moduleId__'];

var childRouter = router.createChildRouter().makeRelative({
        fromParent: true,
        moduleId: parentModuleId
    }).map([
        { route: ['all', ''], moduleId: 'widgets/timeline/child/all', title: 'Show All', nav: true },
        { route: 'tasks', moduleId: 'widgets/timeline/child/tasks', title: 'Tasks', nav: true },
    ]).buildNavigationModel();

<section>
    <div class="panel panel-default">
        <div class="panel-heading" data-bind="foreach: router.navigationModel">
            <a data-bind="attr: { href: hash, title: title }" class="btn btn-primary btn-lg">
                 <span data-bind="text: title"></span>
            </a>
        </div>
    </div>

    <div data-bind="router: { router: router }"></div>
</section>

在dashboard.html或projects.html中：

<div>
    <div data-bind="widget: { kind: 'timeline' }"></div>
</div>

但这似乎不起作用

任何帮助、想法和建议都将不胜感激

---

谢谢

第一个预感，我浏览了你的帖子，没有找到相关的代码，所以这是一个尽可能多的问题，也是一个可能的解决方案：你的父路由（使用时间线小部件的路由）吗正确设置路由，以便子路由器能够响应路由的最后一位？例如，我的“设置”页面中有一个子路由器，这是设置页面的路由：

{route:'settings/*category'，moduleId:'settings/settings.vm'}

。注意这颗星。它被称为splat路由。有关详细信息，请参阅。嗨，汉斯，谢谢你的回答！我已尝试将父路由更改为splat，例如：dashboard/*child，但它有一些问题。（1）我无法再次使用#dashboard hash从其他页面导航（它要求我在斜杠后填充某些内容，例如：#dashboard/all）但它可以工作，URL会在点击子选项卡时相应地更改。（2）我尝试从父路由中删除斜杠，例如：#dashboard*child..这也可以工作，我可以再次使用#dashboard散列，当点击子选项卡时URL也会相应地更改..但是..3）这两种解决方案都不会显示“来自选定子选项卡的视图”。如果正确，则需要删除斜杠。要显示子视图，必须正确调用路由，例如#dashboard/myChildRoute（如果在响应此哈希的子路由器中定义了路由）。如果您的子路由器设置正确，您的路由将正确地输入url栏，最后（但并非最不重要的）：您使用父视图中的路由器/组件绑定来实际显示子视图，它应该可以工作。是的，我非常确定，如果我们在页面本身（而不是小部件）中创建childRoute，这会很好地工作。但它需要我在需要使用小部件的每个页面中创建childRoute。