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.