Preferred client-side routing solution?

Question

I am developing a one-page browser-based web application.

JQuery already in use in my application. I am currently planning to use KnockoutJS to bind data and control the user interface. However, I used Backbone.js in the past, and I was very impressed with the routing tools provided by the controller level.

I also looked at some jQuery-based solution, like pathjs for client-side routing.

It would be great if someone could offer suggestions and recommendations on choosing the right routing system.

I do not want to use Backbone.js instead of KnockoutJS due to the excellent KnockoutJS data binding capabilities.

Answer 1

After a little research, I found a solution. @Eisenhauer Backbone routing objects are awesome, but what if I don't use Backbone. As I stated in my question, I already use KnockoutJS, which provides me with the client-side MVVM model, and therefore it is not a good idea to add an additional MVC implementation to the same page.

For people looking for a standalone routing solution, pathjs is a simple and elegant solution.

A more flexible, powerful, and standalone routing solution is Crossroads.js, available at http://millermedeiros.github.com/crossroads.js/ . It is very well documented and really powerful, so it can be adapted to any requirements.

Answer 2

Can you use a story API, not a hashbang approach?

• It allows you to manipulate the URL displayed to the user.
• This means that back / forward work reasonably.
• Page bookmarking works reasonably.
• This is better in terms of performance because if the user refreshes the page (or gets a link to the page from an external source), the correct content is loaded for the first time, instead of loading a blank page and then capturing the correct content through AJAX.

The downside is that older browsers do not support it. You can opt out of the hashbang approach (if you really need to). I do not know any existing structures that do this. I would rather opt out of dynamically loading content (i.e. reloading a full page when a user clicks a link). The story API will be increasingly supported, so this "problem" will decrease over time.

Here's a working example with some documentation. From the address bar, you can see that the pages load the “old school” (full page refresh), but if you look at the console (Firebug, Chrome dev tools), you will see that the content is captured through an AJAX request.

Mozilla has several docs about this.

Answer 3

There is also a great Director

Answer 4

Crossroads.js seems to be one of the best. One of the main advantages of this is that it does not rely on window.location for routing. It is lightweight because it adheres only to routing and routing alone.

Others you can try: finch.js , davisjs (based on pushState so you can use existing links as backup if JS is down)

Update Addendum: March 30, 2015 - At the end of last year, I moved to AngularJS. Hands-down is the best form of JQ switching, it has many modules, such as routing built-in.