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.

        

            

                
                    A Routes 
                
                    

                        
                        

                            
                        
                        
                    
            
            

                
                    B Routes 
                
                    

                        
                        

                            
                        
                        
                    
            
      

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.