1

It's possible to create childRouter inside the widget that can be re-used in other page again by using a widget?

This is how my directory tree looks like:

* 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

What i want to do is:

  1. Inside a timeline widget i want to have several tab.

    e.g: [ ALL ] and [ TASK ]

  2. Then, i will can use that widget on /dashboard and /projects page.

    for example if I currently use that widget inside /dashboard page then when I click any tab button inside a widget (for this case let's say i click on tasks tab button) it will change a current url from 'localhost/dashboard' to 'localhost/dashboard/tasks' (without refresh a page). Then it will show a view from /widgets/timeline/child/tasks inside a widget.

    So, it will be vice versa if I use that widget inside /projects page, it will change current url from 'localhost/projects' to 'localhost/projects/tasks'

This is what i've tried so far:

Inside timeline.js widget:

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();

Inside timeline.html widget:

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

And inside dashboard.html or projects.html:

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

But it seems doesn't work..

Any help or idea and suggestions will greatly appreciated!

Thanks

Fariz Azmi
  • 713
  • 1
  • 6
  • 21
  • First hunch, I scanned through your post and didn't find the relevant code, so this is as much a question as a possible solution: Do your parent routes (the one that use the timeline widget) have their routes set up correctly so the child router can respond to the last bit of the route? E.g. my 'settings' page has a child router inside, and this is the route for the settings page: `{ route: 'settings/*category', moduleId: 'settings/settings.vm' }`. Note the star. It's called a splat route. See http://durandaljs.com/documentation/Using-The-Router.html for more details. – Hans Roerdinkholder Sep 24 '14 at 10:26
  • Hi Hans, Thanks for your answer! I've try change my parent route to splat E.g: dashboard/*child, but It have a few problem.. (1) I can't use #dashboard hash again to navigate from other page (it required me to fill something after slash E.g:#dashboard/all) but it work, URL will change accordingly when child tab is clicked .. (2) I've tried to remove slash from parent route E.g:#dashboard*child .. This also works fine, I can use #dashboard hash again and URL will change accordingly when child tab is clicked too.. But.. 3) Both of this solutions doesn't display the view from selected child tab.. – Fariz Azmi Sep 25 '14 at 02:08
  • You are correct, the slash needs to be removed. To display the child view, you have to correctly call a route, e.g. #dashboard/myChildRoute if you have a route defined inside the child router that responds to this hash. If your child router is properly set up, your route is properly entered in the url bar, and last (but not least): you use the router/component binding in your parent view to actually display the child view, it should work. – Hans Roerdinkholder Sep 29 '14 at 11:56
  • Yes, I'm pretty sure this is works well if we creating childRoute inside the page itself (not the widget). But it would need me to create childRoute in every pages where i need to use the widget. – Fariz Azmi Sep 30 '14 at 07:06

0 Answers0