Durandal - hide section of page depending on url or route

Question

In my durandal app every page except the home page has a left navbar. This left navbar should be update on refresh, though it should reside on shell.html.

The problem is that i'm not being able to hide it properly on the home page. I can use jquery hide() method to hide the leftnav div when i'm on the home page, but the problem is that i can only use jquery code after data-bindind, and until there i can see the navbar. I tried to use durandal composition, but i'm not sure how can I hide the navbar only in the home page since i don't know how to know if i'm on the home page or not inside shell.js.

Any ideias?

Answer 1

In your view model, you'll want to hook into your router by creating a computed that listens to the value of the current instruction:

var ko = require('knockout');
var router = require('plugins/router');

function viewModel() {
    this.currentRoute = ko.computed(function() {
        return router.activeInstruction().fragment;
    });
}

Then you can reference this variable using the visible binding in your view.

<!-- home route only -->
<div data-bind="visible: currentRoute() == 'home'></div>

<!-- non-home routes -->
<div data-bind="visible: currentRoute() != 'home'></div>

If you need more complicated logic, you can create a special computed function that does specific testing against the current route and reference that variable instead. For example:

this.isSpecialRoute = ko.computed(function() {
    var re = /matchspecialroute/;
    return re.test(this.currentRoute());
}, this);