Backbone router for two dimensional menu: advice

Question

I am a very beginner in backbone.js.
My page navigation looks like this:

The left navigation defines four view types, while the top navigation should update the datamodel and re-render the current view (that's what I have in mind).
I want to allow the user to bookmark the current view and category, according to his/her personal preference (and perhaps store the setting in the browser's localstorage).
The two menus can be used interchangeably, meaning that the user can decide to show a different view with the current category's model, and the user can choose a different category within the current view.

I have some trouble figuring out how I should configure my router for this in a stable way.
Note that there may be additional parameters behind this path, such as displaying an active marker on the map based on a profile_id.

Now, I had the idea of doing something like this:

var AppRouter = Backbone.Router.extend({
        routes: {
            ":view/:category": "aggregatefunction" 
        }
    });

But I'm pretty unsure if this will lead me to what I need.
Since I want to use the menus interchangeably and make them bookmarkable, I already get stuck on creating the links.

Can you just give me some advice regarding the structure and notify me of potential pitfalls to help me on the way?
Any supplementary advice is of course welcome as well.
Thanks

Edit
For the bonus, I would like to read a few more opinions.
I still have some trouble building and adapting the hrefs in the menu anchor tags dynamically, while at the same time being able to trigger the events (change category / or change view). I'm looking for the most stable solution to this problem.
Accompanied with some code per illustration if that would be possible.
Thanks.

Answer 1

Hmm, I think one way to look at this is that the most important part is the View and the Categories are actually less important, they could be considered like a filter. It could even make sense to have a View and no Category (to see 'All'), but here I am just guessing what you app could be doing...

The reason I am saying that is that I assume you are going to have 4 Backbone Views (Map, Livestream, RSS, etc.) but no specific views for those categories. So when switching categories, you don't actually switch view, you just re-render it with a different param, correct?

Then for me, the router should be something like:

'map/:category': '_map'
'rss/:category': '_rss'
...

One route for each main view, and the category as a param to the callback. People can then bookmark an url such as #map/events or #rss/places_to_eat but internally, you are managing 4 clean views.

Later, it'll be easier to use splats to allow for views showing multiple categories at once (splats start with a * in the route definition).

Just my two cents!

Answer 2

I always found Backbone's router to be horrible for this very reason: it is one dimensional. I wrote a jQuery plugin that provides dependent and independent variables. Check it out at http://plugins.jquery.com/uriAnchor/. Building a bookmarkable app with model and view like you have outlined is quite simple with this, although I wouldn't waste my time with Backbone. Let me know if you want to learn more. In any event, I hope this helps.

Answer 3

Based on the reply + comments of @enders, I ended up creating an intermediary model: Here is a demo (without showing a view yet, but managing the dynamic routing): http://www.zwoop.be/bb/index.php

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone, Text, Leftnav){
  var Navstate_Model = Backbone.Model.extend({
      defaults: {
            view: '',
            category: ''
        },
        initialize: function(){
        }
  });
  // Our module now returns our view
  return Navstate_Model;
});

As for the routes:

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '': 'landing_page', 
      ':views/:categories': 'showView',

      // Default
      '*actions': 'defaultAction'
    }, 
    landing_page: function(){
        app.models.navstate_Model.set("view", "map"); 
        app.models.navstate_Model.set("category", "events");         
    }, 
    showView: function(view, category){
        app.models.navstate_Model.set("view", view); 
        app.models.navstate_Model.set("category", category); 
        app.views.leftnav_View.render();
        app.views.topnav_View.render(); 
        console.log(view + ";" + category); 
    }
  });