All-in-one location/hashchange history management library

Question

First of all, I know there\'s libraries that provide polyfills for location.pushState/popState (History.js, Hash.js, jQuery hashchange), so please

Answer 1

I believe Sammy.js ( http://sammyjs.org) (MIT-licenced) has the best focus on what you want to do, with its 2 main pillars being:

1. Routes
2. Events

I could quote from the docs but it's pretty straightforward:

• setup clientside routes that relate to stuff to be done, e.g: update the view through ajax

• link events to call routes, e.g: call the route above when I click an link. (You would have to make sure e.preventDefault is called in the defined event I believe, since this is an app decision really, so that can't be abstracted away by any library that you're going to use imho)

Some relevant docs

• http://sammyjs.org/docs
• http://sammyjs.org/docs/routes
• http://sammyjs.org/docs/events

Example for a route: (from http://sammyjs.org/docs/tutorials/json_store_1)

 this.get('#/', function(context) {
    $.ajax({
      url: 'data/items.json',
      dataType: 'json',
      success: function(items) {
        $.each(items, function(i, item) {
          context.log(item.title, '-', item.artist);
        });
      }
    });
  });

Or something like

 this.get('#/', function(context) {
     context.app.swap(''); ///the 'swap' here indicates a cleaning of the view
                              //before partials are loaded, effectively rerendering the entire screen. NOt doing the swap enables you to do infinite-scrolling / appending style, etc. 
     // ...
   });

Of course other clientside MVC-frameworks could be an option too, which take away even more plumbing, but might be overkill in this situation.

a pretty good (and still fairly recent) comparison:

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ ( I use Spine.js myself ) .

Lastly, I thought it might be useful to include an answer I've written a while ago that goes into detail to the whole best-practice (as I see it) in client-side refreshes, etc. Perhaps you find it useful:

Accessibility and all these JavaScript frameworks