Durandal: how do you dynamically add/remove an item from the navigation model?

Question

Here are the steps I followed:

1) new asp.net mvc 4 project 2) chose the durandal spa template 3) in shell.js, added this route...

{ route: 'orders/:id', moduleId: 'viewmodels/order', nav: false }

4) added a viewmodel- order.js:

define([], function () {
    var Order = (function () {
        function Order() {
            this.orderId = '';
        }
        Order.prototype.activate = function (id) {
            this.orderId = id;
        };
        return Order;
    })();

    return Order;
});

5) added a view- order.html:

<h1 data-bind="text: orderId"></h1>

6) added some links to welcome.html:

<ul>
    <li><a href="#orders/1">Order #1</a></li>
    <li><a href="#orders/2">Order #2</a></li>
    <li><a href="#orders/3">Order #3</a></li>
    <li><a href="#orders/4">Order #4</a></li>
</ul>

This works great, I click on one of the "order" links in the welcome page and the order view opens up. Here is a zip containing the project.

What is the best way to add the order I've just opened to the navigation bar? After clicking on an order link I'd like the navigation bar to look like this:

Durandal | Welcome | Flickr | Order #1

If I clicked on another order link I'd like the navigation bar to look like this:

Durandal | Welcome | Flickr | Order #1 | Order #2

And I'd like to be able to close an order and end up with this (after closing the first order):

Durandal | Welcome | Flickr | Order #2

Last but not least, When navigating between orders I'd like the existing view+viewmodel instances to remain intact (note: the viewmodel script returns a constructor so it's a little different than the welcome and flickr view models).

Any pointers on how to do this would be very much appreciated.

Here's a link back to this question in the Durandal Google Group

Did you ever resolve this? I am trying to do the exact same thing. stackoverflow.com/questions/21677597/… — Jeff - Software Results
no, the project I was working on was put on hold for a while. it picked back up last week, will post an update if we revisit this nav scenario. — Jeremy Danyow

Richard B Richard B · Accepted Answer · 2013-10-11T13:45:38

I believe the only way you'd be able to do that is by re-building the navigation model. There is a discussion on the google groups that talks about custom child navigation, where you call router.reset() and then do the router.mapRoutes([...]).{whatever} to finish this off.

I seriously cannot think of another way of just "adding" and/or "removing" a route. It's something you may want to throw-up on github as an enhancement to the product (for at least the child routers).

Durandal: how do you dynamically add/remove an item from the navigation model?

1 Answers