knockout.js - 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 is how to create a more complex hierarchical navigation system than a buttongroup. Here's what I want to end up with:

A B C
A1 B1 C1
A2 B2 C2

A, B, and C are the top-level menus that have no routes attached to them - they are simply placeholders. I will have views and viewmodels for A1, A2, B1, B2, C1, and C2 and need those hash tags to be active links.

My best idea right now is to append the parent menu into each route's url and have code in nav.html that dynamically adds each node into the appropriate parent based on parsing the url. To be fully dynamic, it would add both the parent nodes and child nodes dynamically.

        {
          url: 'A_A1',
          moduleId: 'viewmodels/A_A1',
          name: 'A1',
          visible: true
        }

I have done a lot of searching for hierarchical navigation examples with Durandal but haven't seen anything yet. Is there a best practice out there for expanding the navigation functionality beyond the simple one-dimensional list? Am I overlooking some functionality in the router that I'm not seeing that would let me do this without embedding hierarchy information into the view names?

EDIT: I just marked an answer as correct, even though I wasn't happy with either solution presented. When selecting a framework to abstract and separate logic, presentation, and control it seems silly to start merging these constructs again just to provide more than a basic navigation shell. I have shifted my development efforts to angularjs where things like this become far more intuitive and can keep the separation. Hopefully Durandal can move forward a little more in the near future and I'll definitely re-evaluate it for future projects.

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.