CODEWITHSUNDEEP
durandal
t316
t316

Reputation: 1159

In durandaljs my nav a tags are not loading my routes

I just upgraded my project to durandaljs 2.0. Everything seems to be working fine in the sense that if I enter a route url in the browser address bar and hit enter it loads the view for the hash route perfectly fine. This works for all of my routes.

But if I click on the navbar button that has the exact same hash routes in the href, the browser url changes to the correct url (the one that works if I hit enter in the address bar) but the view doesn't load.

It's almost like a router.navigate without a trigger is getting called.

I actually manually tried calling route.navigate("#xyz", { replace: false, trigger: true }) but that doesn't load the xyz view either.

I am overlooking something silly here - any ideas?

from shell.js:

activate: function () {
    $.getJSON("/Account/GetCurrentUser").done(function (data, textStatus, jqXHR) {
        shell.user(data);
    });


    $(document).ajaxError(function (xhr, props) {
        if (props.status === 401) {
            window.location = "/Account/Login";
        }
    });

    router.map([
        { route: '', title: 'Jobs', moduleId: 'viewmodels/jobs', nav: true },
        { route: 'companies', title: 'Companies', moduleId: 'viewmodels/companies', nav: true },
        { route: 'profile', title: 'Profile', moduleId: 'viewmodels/profile', nav: true },
        { route: 'users', title: 'Users', moduleId: 'viewmodels/users', nav: true, hash: '#users' },
        { route: 'jobs(/filter/:filter)(/group/:group)(/sort/:sort)(/page/:page)', title: 'Jobs', moduleId: 'viewmodels/jobs', nav: false },
        { route: 'companies(/filter/:filter)(/group/:group)(/sort/:sort)(/page/:page)', title: 'Companies', moduleId: 'viewmodels/companies', nav: false }

        //,{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }
    ]).buildNavigationModel();

    //router.mapNav('details');
    //router.mapNav('airports');
    //router.mapNav('emptylegs');

    return router.activate();
}

from nav.html:

<nav class="navbar navbar-fixed-top" style="max-height:68px">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title"></span>
        </a>        
        <div>
            <ul class="nav" data-bind="foreach: router.navigationModel">
                <li><a data-bind="css: { active: isActive }, attr: { href: hash }, text: title"
                    class="btn btn-info" href="#"></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Thanks

Upvotes: 1

Views: 471

Answers (1)

margabit
margabit

Reputation: 2954

I don't know if that's the problem, but in the a binding you are changing href with knockout and then setting href="#" again.

<a data-bind="css: { active: isActive }, attr: { href: hash }, text: title"
                class="btn btn-info" href="#"></a>

Might not be the cause of the problem. But this doesn't look good..

By the way, also check that the binding with the router is properly done. In Durandal 2.0 it changed, so in your shell.html you should have something like this:

<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->

Instead of this:

<!--ko compose: {
    model: router.activeItem, 
    afterCompose: router.afterCompose, 
    transition: 'entrance'
} -->

Upvotes: 1

Related Questions