Sub view Composition using Durandal

Question

I have a View which is composed of another view (sub view) which has add/edit functionality , now I want to use routing so that on clicking Add a new View (Add) is displayed replacing the original view, I have tried using child router but it is not working ...

Shell is my first view where I setup my router to take the user to Pulse view --

 function boot() {
        datacontext.getstartupdata().then(function () {
            log('Helium SPA Loaded!', null, true);

            router.on('router:route:not-found', function (fragment) {
                logError('No Route Found', fragment, true);
            });

            return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
                .map([{ route: '', moduleId: 'pulse', title: 'Pulse', nav: true }])            // Map the routes
                .buildNavigationModel() // Finds all nav routes and readies them
                .activate('');
            // Activate the router
        });
    }

Now in the pulse view HTML I have --

<article class="tasks-container" >
            <!--ko router: { transition:'entrance' }--><!--/ko-->
        </article>

and in the View Model (.js) file I have --

var childRouter = router.createChildRouter()
    .makeRelative({
        moduleId: 'viewmodels'
    }).map([
        { route: '', moduleId: 'tasklist', title: 'Task List', nav: true },
        { route: 'tasklist', moduleId: 'tasklist', title: 'Task List', nav: true },
        { route: 'newTask', moduleId: 'newTask', title: 'New Task', nav: true},
        { route: 'newTask/:taskId', moduleId: 'newTask', title: 'Edit Task', nav: true }
    ]).buildNavigationModel();

 var pulse = {
        activate: activate,
        compositionComplete: compositionComplete,            
        router: childRouter
    };

    return pulse;

so the Tasklist is bound in the Pulse view as per the KO binding in the HTML but now in the Tasklist view model when I try to navigate to New Task view --

 var showNewTask = function() {
    var url = '#newTask/';
    router.navigate(url, { trigger: true, replace: false });
};

I get a 'Route Not Found' error, please help

Can you give an example of your code? – chafnan Nov 02 '13 at 17:49 — chafnan, Nov 02 '13 at 17:49
I have updated my question with code – akhil Nov 11 '13 at 08:24 — akhil, Nov 11 '13 at 08:24

score 0 · Answer 1 · answered Jan 16 '14 at 21:36

0

It looks as though you are trying to invoke the route which was declared with a required parameter but not passing a value along. If you pass the taskId by setting var url = '#newTask/idvalue' the 'Route Not Found' error should be resolved.

answered Jan 16 '14 at 21:36

Barry

28
1
7

score 0 · Answer 2 · answered Jan 25 '14 at 08:23

I guess your problem is the call to makeRelative in the boot-function. You can not make the root router relative to something - you can make a child router relative to a parent.

Probably something like this (untested):

router.map([
    { route: 'pulse*details', moduleId: 'viewmodels/pulse', title: 'Pulse', nav: true }
]);

and in the pulse view model:

var pulse = {
    router: router.createChildRouter()
      .makeRelative({ moduleId: 'viewmodels/pulse', route: 'pulse' })
      .map([
        { route: '', moduleId: 'viewmodels/tasklist', title: 'Task List', nav: true },
        { route: 'create', module: 'viewmodels/newTask', title: 'New Task', nav: true },
        { route: 'edit/:id', module: 'viewmodels/newTask' title: 'Edit Task', nav: true }
      ])
      .buildNavigationModel()
    ...
}

So you should finally be able to navigate to following routes:

#pulse
#pulse/create
#pulse/edit/1

Sub view Composition using Durandal

2 Answers2