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

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:

我找不到令人满意的方式来处理浏览器的历史记录。当然有像History.js这样的可爱插件，适用于较小的东西。但是，让我举个例子：

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:

我有一个多页面的表单，要求用户提供不同的东西。每次提交到下一页（实际上相同，它只是根据HTTP-POST变量更改视图）后，页面上会有一些动画和更改：

the main content changes to the next form (with a slideUp/slideDown)
主要内容更改为下一个表单（使用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.

所以这是非常基本的，但我已经在苦苦挣扎，因为所有动画（最后两部分）在每个状态（不同的div，不同的输入源）上是不同的，我不知道如何使它们如此通用，我不必分开指出它们。

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:

我可以忍受这一点，但是当用户点击后退按钮时，我必须再次重新定义所有这些动画（相反）。内容加载肯定没问题，它基本上只是用ajax-load重新加载文件：

I execute a pushstate with the input data as the stateObj on submit
我使用输入数据执行一个pushstate作为提交时的stateObj
so I can execute the content-load in the bound 'statechange' event
所以我可以在绑定的'statechange'事件中执行content-load

As said though, the rest drives me insane.

如上所述，其余的让我感到疯狂。

4 个解决方案

#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.

我强烈建议抓住并学习Backbone.js。它与jQuery配合使用，并以修改后的MVC模式设置您的网站。它还有一个很好的系统来处理URL更改和执行适当的代码。

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.

至于滑动，如果你想要反转动画，那么跟踪它可能会有点痛苦。当我在屏幕之间滑动时，我对我的应用程序做了什么，而不是有时向上滑动，有时向下滑动，我总是将元素移动到我滑动的DOM中，以便它在我滑动的元素之后。这样幻灯片总是朝着同一个方向前进，我的动画也不会让所有人都高兴。

#2

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

您可以尝试JavaScriptMVC，其中包括jQuery。不确定它是否符合您的确切要求，但它是JavaScript和MVC ......

#3

Although not quite strictly MVC (of which there are several for JavaScript) I think backbone js is a great framework, that is based around the concepts of MVC, but re-worked to better suit the JavaScript language and environment.

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

#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.

当用户点击后退/前进按钮时，我不是向前/向后动画所有内容，而是使用ajax重新加载整个站点，这样我就可以使用所选站点的stateObj进行HTML / PHP回退。

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.

History.js的问题是它无法区分onstatechange事件中的pushState和back / forward按钮。所以我使用pushstate从History.js降级为标准的W3C行为。 1.8.0的更新将允许区分内部和外部状态变化。

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!

感谢所有答案，但我想这是处理它的最准确方法，而单独使用MVC并不能解决问题 - 为什么我不接受任何其他答案！

#1