durandal router.navigate not working

Question

I need to navigate to another view from a event handler in my code, I do it like this

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'underscore'],
 function (system, app, viewLocator, router, _) {
    system.log('starting app');
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");
    app.title = 'Destiny';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true,
        observable: true
    });

    router.map('destination', 'viewmodels/destination');
    router.activate();
    _.delay(function() {
        app.start().then(function() {
            //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
            //Look for partial views in a 'views' folder in the root.
            viewLocator.useConvention();

            //Show the app by setting the root view model for our application with a transition.
            app.setRoot('viewmodels/locationPicker', 'flip');
        });
    }, 1500);
}

);

Here I define a mapping between my moudle and the router - destination and set root view as another view locationPicker

in my another view locationPicker.js, I navigate to it like this

router.navigate('destination');

from the developer tool, I see that my view model destination.js file is loaded without error, but the view does not change at all. Why is this happening? BTW, I am using the durandal 2.0.1 version

I don't know if it's related, but it is very non-standard to activate your router before starting your app. Any reason for this? In my code, I immediately app.start and configure and activate my router after the promise resolves in the then callback. — Matthew James Davis, Oct 09 '13 at 16:47
The reason is that I am a beginner, a stupid one though, :) Since I tried to break out of the box, which is of course stupid for a beginner. I should stick with the StartKit to use the shell view as root view and then do routing over there. — imgen, Oct 10 '13 at 00:14
its good to break out of the box because it helps you understand what the code is really doing behind the scenes. for example, what i've done here is much different than the starter kit: i have initialized the router inside of main, not shell, omitted router.buildnavigationmodel, and chained activate onto the mapping configuration. keep up the good work, and keep using the resources available to you here on stackexchange :) — Matthew James Davis, Oct 10 '13 at 16:34

score 2 · Accepted Answer · answered Oct 09 '13 at 16:50

The router plugin is initialized in the call to app.start. Therefore, you're configuring the plugin before initialization, and the configuration isn't being registered. Also, I'm not familiar with your syntax for registering the route. The more standard way is to pass in a list of objects with a route pattern and module id. Please try the following:

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router'],
 function (system, app, viewLocator, router) {
    system.log('starting app');
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");
    app.title = 'Destiny';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true,
        observable: true
    });

    app.start().then(function() {

        router.map([
            { route: 'destination',  moduleId: 'viewmodels/destination' }
        ]).activate();

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/locationPicker', 'flip');
    });
}

durandal router.navigate not working

1 Answers1