Question

1) Which JavaScript hashchange/history library/method should I use for my JavaScript application?
2) And how do I achieve these 3 things using that method?

A) When the page loads I want to parse the url hash/parameters and set the initial application state.
Specifically, my application consists of a Backbone Collection with two models which has attributes such as selectedCountry, selectedYear etc.
(I don’t think I can use the Backbone.Router as this is a very customized visualization app with complex states?)

B) I want to set up a hashchange listener or similar that lets me update the app state correspondigly

C) On Backbone Collection change events I’d like to update the url. Important: I want to remove the hashchange listener temporarily while doing this so that there is no feedback loop.

Note:
The app is already relying on some HTML5 technologies so the solution does not have to be compatible with the older browsers … But the “feedback loop” part is important as I’ve struggled with this before …

Thanks 🙂

Answer 1

since your already using Backbone, I would stick with Backbone’s Router objects. It will be easier to use what’s already available in your app instead of trying to bring something new in the mix.

As for your feedback loop problem, I’ve solved this by never firing my router methods from code.

The gist of it is that I let my JavaScript objects control the state of the application, and do the work for me. When I do call router.navigate, I never pass true as the second argument. I only call router.navigate in response to a state change in my app, to update the hash fragment in my browser window. Here’s the thing: This is purely a response to the state of the application having changed. I never use router.navigate to change the state of my app.

Hope that helps