Routing with crossroads.js + browser history(from backbone.js)

Posted on July 26, 2011

2


extension4

It’s a very exciting time for developers, especially web developers. There has been a blow out of great cutting-edge web application thanks to the many javascript frameworks and plugins springing up. This is very good because as an engineer, you get to pick and choose what framework/plugin you want to use and the ability to extend it to fit your needs. Per last past, I started work on a personal project. One of my projects required a client-side routing engine. I looked at Backbone.js for its routing api which was great but it come with all the other api I didn’t wont/need.I looked at  Crossroads.js  and was just perfect because it did exactly what I was looking for -routing, and no more that that. Apart from client-side routing, I also need a navigation engine to allowing for routing to bookmarks and application states. Backbone.js comes with a supporting api called History. Since I wanted crossroads.js routing but Backbone.js implementation of  application navigation mechanism, I got hacking and in 10 min, had an extended crossroad.js with history support by porting over the implementation from Backbone. You can find and grab the code from github. You will need jquery to use this extension. Another thing you need to know is during hash navigation, crossroads is called with the relative path of the page and not just the hash. Thus if you navigate to “#3:edit” using crossroads.navigator at “www.test.com/people”, you will be navigated to “www.test.com/people#3:edit” and the request passed to crossroads for routing will be “people#3:edit”.

 

Credit: Feature sketch by ekubochan at Odosketch

Advertisement
Posted in: Javascript, Scripting