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

backbone.js url-routing backbone-routing
chaonextdoor picture chaonextdoor · Apr 27, 2012 · Viewed 16.5k times · Source

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?

Answer

mu is too short picture mu is too short · Apr 27, 2012

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/

Related questions

Preferred client side routing solution?

I am designing a one page browser based web application. JQuery is already being used in my application. I am currently planning to use KnockoutJS for data-binding and UI management. However I have used Backbone.js in past, and I …

Read More
How can I pass query string to backbone.js routing

I'm using Backbone.js and jQuery-mobile. jQuery-mobile routing is disabled and I'm using the lib only for UI. I got everything working, except selecting page transition. I need to pass the page transition ('slice-up', 'fade', 'slide-down') to the Backbone router …

Read More
JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."

I have been adding logs to the console to check the status of different variables without using the Firefox debugger. However, in many places in which I add a console.log in my main.js file, I receive the following …

Read More