如何处理jQuery中的后退按钮？

Question

I just can't find a satisfying way to handle the Browser's History. Sure there are lovely plugins like History.js , which works fine for smaller things. But let me give you an example:

I have a multi-paged form that asks the user for different things. After every submit to the next page (actually the same, it just changes the view depending on HTTP-POST variables), there are some animations and changes on the page:

• the main content changes to the next form (with a slideUp/slideDown)
• the progress bar changes it's state with an animation
• below this bar, some information about some of the input fades in

So that's pretty basic right now, but I'm already struggling, because all the animations (the last 2 parts) are different on every state (different div, different input-sources) and I have no idea how to make them so generic, that I have not to specify them separatly.

I could live with that though, but when a user hits the back button I have to redefine all those animations again (in reverse). The content-load sure is no problem, it basically just reloads the file with an ajax-load:

• I execute a pushstate with the input data as the stateObj on submit
• so I can execute the content-load in the bound 'statechange' event

As said though, the rest drives me insane.

Answer 1

I would highly recommend grabbing and learning Backbone.js. It plays great with jQuery and sets up your website in a modified MVC pattern. It also has a great system for handling URL changes and executing the appropriate code.

As for sliding, if you want to reverse animations, that could be a bit of a pain to keep track of. What I did with my app when I was sliding between screens is instead of sometimes sliding up and sometimes sliding down, I would always move the element in the DOM that I was sliding to so that it was after the element I was sliding from. That way the slide was always going in the same direction and my animations wouldn't get all goofy.

Answer 2

You could try JavaScriptMVC , which includes jQuery. Not sure if it meets your exact requirements but it is JavaScript and MVC...

Answer 3

虽然不是非常严格的MVC（其中有几个用于JavaScript）我认为骨干js是一个很好的框架，它基于MVC的概念，但重新工作以更好地适应JavaScript语言和环境。

Answer 4

Well after a lot of punching around and stuff, I decided to degrade to the simplest and best solution for my problem: Using the basics.

Instead of animating everything backwards/forwards when the user hits the back/forward buttons, I just reloaded the whole site with ajax so I can use the HTML/PHP fallback with the stateObj of the selected site.

Problem with History.js though is that it can't distinguish between pushState and back/forward button in the onstatechange-event. So I degraded from History.js to the standard W3C behaviour with pushstate. There will be an update with 1.8.0 that allows to distinguish between internal and external statechanges.

Thanks for all the answers, but I guess this is the most accurate way of dealing with it, while using MVC alone doesn't solve the problem - why I didn't accept any other answer!