Backbone.js: How to utilize router.navigate to manipulate browser history?

Posted by Xavier_Ex on Stack Overflow See other posts from Stack Overflow or by Xavier_Ex
Published on 2012-12-09T21:01:11Z Indexed on 2012/12/09 23:04 UTC
Read the original article Hit count: 148

Filed under:

backbone.js

|

pushstate

I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.

Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.

Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?

EDIT: in particular, I'm trying something like mentioned in this article.

© Stack Overflow or respective owner

Related posts about backbone.js

Namespaced Backbone.js Views not firing events

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm currently getting started with Backbone.js. I've wrote some examples with Backbone and they are working fine. But now I need to use Backbone.js with Rails 3.1 and CoffeeScript. I took my well-working examples and rewrote on CoffeeScript using backbone-rails gem. And got the following problem… >>> More
How to prevent a javascript/backbone.js cloned model from sharing attributes

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm working with backbone.js models, so I don't know if my question is particular to the way backbone handles cloning or if it applies to javascript in general. Basically, I need to clone a model which has an attribute property assigned an object. The problem is that when I update the parent or… >>> More
Backbone.js not registering Model.hasChanged event

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I'm trying to get a View in Backbone.js to save when there's a 'change' event if (and only if) the data has changed. Long story short, I've a 'change' event set on the View that calls this: function changed_event() { log.debug("Before: " + this.model.get('name')) // not 'contrived!' … >>> More
Backbone.js Model change events in nested collections not firing as expected

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to use backbone.js in my first "real" application and I need some help debugging why certain model change events are not firing as I would expect. I have a web service at /employees/{username}/tasks which returns a JSON array of task objects, with each task object nesting a JSON array… >>> More
only update certain model attributes using Backbone.js

as seen on Stack Overflow - Search for 'Stack Overflow'
With Backbone, I'm trying to update and save to the server just one attribute: currentUser.save({hide_explorer_tutorial: 'true'}); but I don't want to send all the other attributes. Some of them are actually the output of methods on the server-side and so they are not actually true attributes with… >>> More

Related posts about pushstate

How to get notified about changes of the history via history.pushState?

as seen on Stack Overflow - Search for 'Stack Overflow'
So now that HTML5 introduces history.pushState to change the browsers history, websites start using this in combination with Ajax instead of changing the fragment identifier of the URL. Sadly that means that those calls cannot be detect anymore by onhashchange. My question is: Is there a reliable… >>> More
History.js not working in Internet Explorer

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying to get history.js to work in Internet Explorer because I need history.pushState() to work. I have read over the instructions on GitHub (https://github.com/balupton/History.js/) and have tried implementing it, but havent had any success. Here's what I have <!DOCTYPE html> <html> <head> … >>> More
How to use PJAX? (PJAX With PHP?)

as seen on Stack Overflow - Search for 'Stack Overflow'
I was trying to get PJAX working with my PHP site, this is the code I am using for it: <script src="js/jquery.js"></script> <script src="js/jquery.pjax.js"></script> <script type="text/javascript"> $(function(){ // pjax $('ul a')… >>> More
Backbone.js routing without changing url

as seen on Stack Overflow - Search for 'Stack Overflow'
I am migrating a single-page web application based on Backbone.js and jQuery to a Chrome extension. However, neither the pushState nor the hashbang-based router modes seem to play well with the environment within the extension. I've come to the conclusion that I'm better off just directly rendering… >>> More
Backbone.js: How to utilize router.navigate to manipulate browser history?

as seen on Stack Overflow - Search for 'Stack Overflow'
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice. Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method… >>> More