Backbone.js: get current route

backbone.js

Using Backbone, is it possible for me to get the name of the current route? I know how to bind to route change events, but I'd like to be able to determine the current route at other times, in between changes.

Best Answer

If you have instantiated a Router in your application, the following line returns the current fragment:

Backbone.history.getFragment();

From the Backbone.js documentation:

" [...] History serves as a global router (per frame) to handle hashchange events or pushState, match the appropriate route, and trigger callbacks. You shouldn't ever have to create one of these yourself — you should use the reference to Backbone.history that will be created for you automatically if you make use of Routers with routes. [...]"

If you need the name of the function bound to that fragment, you can make something like this inside the scope of your Router:

alert( this.routes[Backbone.history.getFragment()] );

Or like this from outside your router:

alert( myRouter.routes[Backbone.history.getFragment()] );

Related Solutions

Javascript – the purpose of backbone.js

Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in an MVC (Model, View, Controller) fashion where...

Model is part of your code that retrieves and populates the data,

View is the HTML representation of this model (views change as models change, etc.)

and optional Controller that in this case allows you to save the state of your Javascript application via a hashbang URL, for example: http://twitter.com/#search?q=backbone.js

Some pros that I discovered with Backbone:

No more Javascript Spaghetti: code is organized and broken down into semantically meaningful .js files which are later combined using JAMMIT
No more jQuery.data(bla, bla): no need to store data in DOM, store data in models instead
event binding just works
extremely useful Underscore utility library
backbone.js code is well documented and a great read. Opened my eyes to a number of JS code techniques.

Cons:

Took me a while to wrap my head around it and figure out how to apply it to my code, but I'm a Javascript newbie.

Here is a set of great tutorials on using Backbone with Rails as the back-end:

CloudEdit: A Backbone.js Tutorial with Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

p.s. There is also this wonderful Collection class that lets you deal with collections of models and mimic nested models, but I don't want to confuse you from the start.

Highlighting current navigation state in Backbone.js application

In backbone 0.5.x you can bind all event to router instance and the first argument pass to your handler will be route

Here is exemple on jsfiddle, reproduced here:

var dummy = Backbone.Router.extend({
    defaultPage: 'messages',

    routes: {
        '': 'index',
        'index': 'index',
        'mailbox': 'mailbox'
    },

    index: function() {
        // code here
    },

    mailbox: function() {
        // code here
    }
});

var router = new dummy();

router.bind('all', function(route) {
    document.write('triggered: ' + route + '<br/>');
});

router.navigate('index', true);
router.navigate('mailbox', true);

Best Answer

Related Solutions

Javascript – the purpose of backbone.js

Highlighting current navigation state in Backbone.js application

Related Topic