Two-dimensional menu backbone router: tip

Question

I am very new to backbone.js.
My page navigation is as follows:

Left navigation defines four views, while top navigation should update the data and redisplay the current view (which I mean).
I want to allow the user to add bookmarks of the current view and category according to his personal preferences (and, possibly, save the settings in the localstorage browser).
These two menus can be used interchangeably, which means that the user can decide to show a different view with the current model of the model, and the user can select a different category in the current view.

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

Now I had an idea to do something like this:

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

But I'm pretty not sure if this will lead me to what I need.
Since I want to use menus interchangeably and bookmark them, I'm already stuck on link building.

Can you just give me some design tips and let me know about potential pitfalls that will help me along the way?
Any further advice is of course welcome.
thanks

Edit
For a bonus, I would like to read a few more opinions. I still have problems building and adapting hrefs in menu binding shortcuts dynamically, and at the same time being able to fire events (change category / or change view). I am looking for the most stable solution to this problem.
Combined with some code in the illustration, if possible.
Thank you

Answer 1

Hmm, I think that one way to look at this is that the most important part is the presentation, and the categories are actually less important, they can be considered as a filter. It would even be wise to have a View and no Category (see "Everything"), but here I just guess what you can do ...

I say that I assume that you will have 4 Backbone Views (Map, Livestream, RSS, etc.), but there are no specific views for these categories. So when you switch categories, you don't actually switch the view, you just redraw it with a different parameter, right?

Then for me the router should look something like this:

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

One route for each main view, and a category as a parameter for a callback. Users can then add a URL, such as # map / events or # rss / places_to_eat, but internally you control 4 clean views.

Later it will be easier to use the icons to simultaneously view several categories at once (the icons begin with * in the route definition).

Just my two cents!

Answer 2

I always found a Backbone router to be terrible for this very reason: it is one size. I wrote a jQuery plugin that provides dependent and independent variables. Check it out at http://plugins.jquery.com/uriAnchor/ . Creating a bookmarking application using a model and view, as you have outlined, is pretty simple with this, although I would not spend my time on Backbone. Let me know if you want to know more. Anyway, I hope this helps.

Answer 3

Based on @enders answer + comments, I ended up creating an intermediate model: The following is a demo (until a view is shown, but dynamic routing control): 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; }); 

Regarding 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); } });