1

是否可以在小部件内创建子路由器，可以通过使用小部件再次在其他页面中重复使用？

这是我的目录树的样子：

* 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

我想做的是：

  1. 在时间线小部件内，我想要几个选项卡。

    e.g: [ ALL ] and [ TASK ]

  2. 然后，我将可以在/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();

在timeline.html小部件内部：

<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>

不过好像不行。。

任何帮助或想法和建议将不胜感激！

谢谢

4

0 回答 0