How to use dropdowns for Durandal navigation?

Question

I\'ve just started working with Durandal and all the pieces are falling into place, and am using the Hot Towel template to speed things up.

One thing that stumps me

Answer 1

You could hard-code them into your shell view, but if you didn't want to do that you can do it this -

In your view, make a non-working anchor with /# that does nothing, with a drop down of a-routes, and another with a drop-down of b routes.

        <div class="nav-collapse collapse main-nav">
            <div class="btn-group">
                <a class="btn" href="/#">
                    <span class="text">A Routes</span> </a>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <!-- ko foreach: aRoutes -->
                        <li data-bind="css: { active: isActive }">
                            <a data-bind="attr: { href: hash }, html: name"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
            </div>
            <div class="btn-group">
                <a class="btn" href="/#">
                    <span class="text">B Routes</span> </a>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <!-- ko foreach: bRoutes -->
                        <li data-bind="css: { active: isActive }">
                            <a data-bind="attr: { href: hash }, html: name"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
            </div>
      </div>

Make some computed observables for the routes in your shell view model

    var aRoutes = ko.computed(function () {
        return router.allRoutes().filter(function (r) {
            return r.settings.aroute;
        });
    });

    var bRoutes = ko.computed(function () {
        return router.allRoutes().filter(function (r) {
            return r.settings.broute;
        });
    });

and in your route definition -

 {
     url: 'a1',
     moduleId: 'viewmodels/a1',
     name: 'A1',
     visible: false,
     settings: {aroute: true}
 },

This sets all your routes to false, and then gives them another attribute of aroute that is set to true. The computed filters down to only routes with that setting set to true.

Answer 2

I devised a general solution after having read this post. With this solution you can dynamically add any routes to a dropdown menu in the nav.

In main.js, where i specifiy my routes, I added a function for mapping the submenu object to the main nav route's settings object.

function mapSubNav(parentRouteInfo) {
    var subroutes = [];
    var length = arguments.length;
    for (var i = 0; i < length; i++) {
        subroutes.push(arguments[i]);
    }
    parentRouteInfo.settings.subroutes = subroutes;
}

var page = router.mapNav('page', null, 'Page'),
    sub1 = router.mapRoute('page/sub1', null, 'Sub1'),
    sub2 = router.mapRoute('page/sub2', null, 'Sub2');
mapSubNav(nav, sub1, sub2);

---

Explanation:

The router function mapNav returns a route definition which looks like this:

{
    url:'flickr', //you provided this
    name: 'Flickr', //derived
    moduleId: 'flickr', //derived
    caption: 'Flickr', //derived (uses to set the document title)
    settings: {}, //default,
    hash: '#/flickr', //calculated
    visible: true, //from calling mapNav instead of mapRoute
    isActive: ko.computed //only present on visible routes to track if they are active in the nav
}

The helper function, mapSubNav, will place a list of references to the routes you want to appear in the drop-down menu in the settings object. In this example, the result will be:

{
    url:'page',
    name: 'Page',
    moduleId: 'page',
    caption: 'Page',
    settings: { subroutes: [nav, sub1, sub2] },
    hash: '#/page',
    visible: true,
    isActive: ko.computed
}

---

I extended my shell viewmodel to look like this:

define(function (require) {
    var router = require('durandal/plugins/router');
    var app = require('durandal/app');

    var ViewModel = function () {
        var self = this;
        self.router = router;
        self.dataToggle = function (route) {
            return !!route.settings.subroutes ? 'dropdown' : '';
        };
        self.html = function (route) {
            return !!route.settings.subroutes ? route.name + ' <b class="caret"></b>' : route.name;
        };
        self.hash = function (route) {
            return !!route.settings.subroutes ? '#' : route.hash;
        };
        self.divider = function (route, parent) {
            system.log('Adding', route, 'to dropdown', 'Parent', parent);
            return route.hash === parent.hash;
        };
        self.activate = function () {
            return router.activate('welcome');
        }
    };

    return new ViewModel();
});

---

Note:

The extra functions in shell.js will decide what attributes that should be added to the DOM elements in the nav.

---

And finally, my I edited my shell view to look like this;

<div class="nav-collapse collapse">
    <ul class="nav navbar-nav" data-bind="foreach: router.visibleRoutes()">
        <li data-bind="css: { active: isActive, dropdown: !!settings.subroutes }">
            <a data-bind="css: { 'dropdown-toggle': !!settings.subroutes },
                          attr: { href: $root.hash($data), 'data-toggle': $root.dataToggle($data) },
                          html: $root.html($data)"></a>
            <ul data-bind="foreach: settings.subroutes" class="dropdown-menu">
                <li><a data-bind="attr: { href: hash },
                                  html: name"></a></li>
                <li data-bind="css: { divider: $root.divider($data, $parent) }"></li>
            </ul>
        </li>
    </ul>
</div>

---

Result:

The final result is a menu item with a dropdown toggle. The dropdown menu will contain a link to the parent and to one link each to the subroutes. Something like this:

---------------------------------------------
 Menu items... | Page v | More menu items...
---------------------------------------------
               | Page   |
               ----------
               | Sub 1  |
               | Sub 2  |
               ----------

jQuery doesn't let you map a route to a dropdown-toggle button, which is why I made the parent route keep a reference to itself in the list of subroutes There will still exist a link to the parent route in the nav.