durandal.js navigation with parameters

4.4k Views Asked by At

i am not able to navigate from one view to another view with pararameter

from :-

ViewModel : App/Foldername/page1.js
View : App/Foldername/page1.html

i want to go with id parameter:

ViewModel : App/Foldername/page2.js
    View : App/Foldername/page2.html

in page1.js i wrote following things,

self.goTopage2 = function (id) {
                            router.mapRoute('Foldername/page2/:id', 'viewmodels/Foldername/page2', 'This is page2view');
        };

in shell.js

 function boot() {
            router.mapNav('home');
            router.mapNav('details');
            router.mapNav('Foldername/page2');              
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

please guid me correct way!

2

There are 2 best solutions below

0
On

A common approach is to have a list of routes somewhere and load up that list. When you define a list such as below, you need to use router.map() to map the routes, as mapNav creates a default route without parameters. Example of an object containing routes -

var routes = [{
    url: 'home',
    moduleId: 'viewmodels/home',
    name: 'Home',
    visible: true,
    settings: {}
}, {
    url: 'events',
    moduleId: 'viewmodels/events/events',
    name: 'Events',
    visible: true,
    settings: {}
}, {
    url: 'eventdetails/:id',
    moduleId: 'viewmodels/events/eventdetails',
    name: 'Event Details',
    visible: false,
    settings: { event: true, show: false }
}];

And how to map those routes -

router.map(routes);

And finally how to visit those routes -

router.activate('home');

or

var url = '#/fighterdetails/' + selectedFighter.id();
router.navigateTo(url);
0
On

(DurandalJS 1.2.0) I'm not totally sure if this is the best way, since I'm quite new to Durandal, but at least managed to make it work with this:

In main.js:

router.mapRoute('details/:id', 'viewmodels/details', 'Details', false);

In list.js:

loadDetails: function (id) {
    router.navigateTo('#/details/' + id);
},