DurandalJS Routing Behavior

Question

What I Have

Trying to understand what's going on and how to control it. I have a "public" view for users that have not yet been authenticated, and a "home" view for users that are authenticated. Here's my route config:

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

        //configure routing
        router.useConvention();

        router.mapRoute('home', 'viewmodels/home', 'Test App', true);
        router.mapRoute('public', 'viewmodels/public', 'Test App', true);
        router.mapRoute('set/:id', 'viewmodels/set', 'Set');
        router.mapRoute('folder/:id', 'viewmodels/folder', 'Folder');
        router.mapRoute('api', 'viewmodels/api', 'API Reference');
        router.mapRoute('error', 'viewmodels/error', 'Error', false);
        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.

        if (dataservice.isAuthenticated() === true) {
            app.setRoot('viewmodels/shell', 'entrance');
            router.navigateTo('home');
        } else {
            app.setRoot('viewmodels/public');
            router.navigateTo('#/public');
        }

        router.handleInvalidRoute = function (route, params) {
            logger.logError('No route found', route, 'main', true);
            router.navigateTo('#/error');
        };
    });

The Problems

When I run the app for the first time, I'm not authenticated, and I get an error:

Uncaught TypeError: Cannot call method 'lookupRoute' of undefined 

Originating from the 'router.navigateTo('#/public');' line.

Then when I try to click the login button, I get the same error from this:

define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
   var publicViewModel = function () {
        self.logIn = function () {
            app.setRoot('viewmodels/shell');
            router.navigateTo('#/home');
        };

But the content loads correctly. When I navigate to a particular page by clicking, say to /folder/2, and then change the url to /folders/2 (invalid), I get "route not found" in my log, as expected, but I run into a few other issues:

1. I don't get the error page, or any errors (as I think I should, per my handleInvalidRoute)
2. If I click on something else, the url doesn't change, and new content isn't loaded, again with no errors.

I think I'm breaking routing somehow, but I'm not sure how. How can I correct the above issues?

Screen:

Answer 1

I suspect calling navigateTo where you are might be too soon for some reason. To test this theory try move this code.

    if (dataservice.isAuthenticated() === true) {
        app.setRoot('viewmodels/shell', 'entrance');
        router.navigateTo('home');
    } else {
        app.setRoot('viewmodels/public');
        router.navigateTo('#/public');
    }

into an "activate" method on your publicviewmodel, and in the main.js just leave this:

app.setRoot('viewmodels/public');

EDIT: Old suggestion

I believe on your viewmodel for the root you need a router property. So modify your public viewmodel to add one:

define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
   var publicViewModel = function () {
        self.router = router;
        self.logIn = function () {
            app.setRoot('viewmodels/shell');
            router.navigateTo('#/home');
        };

(where do you define self though?)