How to trigger the Backbone.Router events in Backbone.js?

Question

Router in Backbone.js is responsible for routing client-side pages, and connecting them to actions and events based on urls. But how to trigger the url change? I mean if the only way to do this is to enclose the element associated with page routing in <a> tag.

Because I have associated the mousedown and mouseup events with the element used for routing, if I put it in <a> tag, the mousedown and mouseup events will definitely become invalid as it will have conflict with the click event of <a> tag. So is there other ways to make the routing?

Solution

You can use Router#navigate:

navigate router.navigate(fragment, [options])

Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL. If you wish to also call the route function, set the trigger option to true.

So, if your router is r and you want to activate the route for #/some_route, then you could:

r.navigate('some_route', { trigger: true });

Demo (open your console please): http://jsfiddle.net/ambiguous/xkZtB/