如何实现在单一页面的移动Web应用程序我自己的历史堆栈？ [英] How to implement my own history stack in a single page mobile web application?

问题描述

我有骨干和开发的Zepto单页移动应用程序。

I have a single-page mobile application developed with Backbone and Zepto.

它在浏览器中的前进/后退按钮正常工作。

It works correctly with the back/forward buttons in the browser.

当用户导航到一个页面，在新的的内容从右侧的的老的内容滑梯滑出转向左面（进出视口）。我想如果用户presses前进浏览器按钮，发生同样的事情。这一切工作。

When the user navigates to a page, the new content slides in from the right as the old contents slides away to the left (and out of the viewport). I want the same thing to happen if the user presses the "forward" browser button. This all works.

我有一个类，我添加到body元素导航回将翻转此行为，因此当用户使用浏览器的后退按钮导航回，他们看到的内容的滑动的回的在从左侧和其他内容滑向右侧。基本上正好相反的向前发展。

I've got a class that I add to the body element navigate-back that will flip this behaviour, so when the user navigates back with the browser's back button, they see the content sliding back in from the left and the other content sliding into the right. Basically just the opposite of going forward.

我需要在用户向后导航这样我就可以调用备用行为检测。我试图实现我自己的历史堆栈，但我已经遇到了很多问题，其中有时它标志着向前一个的回的导航它破坏了视觉线索。它陷入黑客的杂牌现在大概只会为难我，如果我张贴。

I need to detect if the user is navigating backwards so I can invoke the alternate behaviour. I have tried implementing my own history stack, but I've ran into lots of problems where sometimes it marks a forward as a back navigation which ruins the visual cue. It's descended into a kludge of hacks now and probably would only embarrass me if I posted it.

什么是实现我自己的历史堆栈，所以我可以，如果用户是在一个单页骨干移动应用程序？

What is the best way to implement my own history stack so I can detect if the user is navigating forward/back in the context of a single-page Backbone mobile application?

推荐答案

我不知道Backbone.js的 ¹ ，但我已经帮助开发移动应用程序，它必须实现的正是这种行为在HTML5中，所以我应该能够去给一些好的建议：

I don't know about backbone.js¹, but I have helped develop a mobile application which had to implement exactly this behavior in html5, so I should be able go give some good advice:

首先，这是很好的知道， history.pushState 函数存在。它最大的问题是，虽然它最多支持的Andr​​oid 2.3，但不能在Android的3到安卓4.0.3 。由于kiranvj指出正确的，这可以通过使用流行的解决history.js这为缺少一个填充工具的解决方案库历史功能。

First of all it's good to know that the history.pushState function exists. The big problem with it though is that it is supported up to android 2.3, but not on android 3 till android 4.0.3. As kiranvj points out correctly this can be solved by using the popular history.js library which provides a polyfill solution for the lack of the history functionality.

现在，让你的实际问题，我实现了历史方向的动画办法就是将数据添加到 pushState的函数（ history.pushState （数据，标题，URL））与我所确定的页面的逻辑位置。在我的应用程序不仅限于单杠，但在你的情况，你会保持位置跟踪，其中任何新的加载页面获取的是更高之一，那么你的当前页面的位置。例如。

Now, getting to your actual problem, the way I implemented the history direction animations was by adding data to the pushState function ( history.pushState(data,title,url) ) with which I identified the logical position of the page. In my application I wasn't only limited to a horizontal bar, but in your case you would keep track of position where any new loaded page get's a position which is one higher then your current page. E.g.

History.pushState({position:History.getState().data.position+1},"Your title","Your URL");

接下来，当 window.onstatechange 或 window.onanchorchange 事件触发你观察位置是否高于或比你的当前页面（例如，通过使用 history.js History.getState（）函数我在上面使用的），并根据这个决定在哪个方向移动（低级是向左，和更高的是在正确的），如由下面的图像示出：

Next, when the window.onstatechange or window.onanchorchange event triggers you observe whether the position is higher or lower than your current page (e.g. by using the history.js History.getState() function which I used above) and depending on this you decide in which direction to move (lower is to the left, and higher is to the right), as is illustrated by the image below:

您还会注意到，我已经假定你有第一页上{位置：1} ，而通常在第一页就没有状态信息。这是可以实现的方法是使用 history.replaceState 它与更翔实的状态替换当前空状态。另外，您还可以检查空状态上的任何pviously提到的事件的$ P $的，如果它是空的，你认为它是最左边的一（ {位置：1} ）。

You will also note that I already assumed on the first page that you have {position:1}, whereas normally the first page will have no state information. The way this can be achieved is by using history.replaceState which replaces the current empty state with a more informative state. Alternatively you can also check for an empty state on any of the previously mentioned events and if it's empty you assume it to be the left most one ({position:1}).

希望这有助于，如果您有任何其他问题随时问。

Hope this helps and if you have any additional questions feel free to ask.

请注意，这个答案假定您使用 history.js ，你会需要听略有不同的事件（如 onpopstate ），并使用略有不同的结构（历史，而不是历史），如果你想建立自己的解决方案。

Please note that this answer assumes you are using history.js and you would need to listen to slightly different events (such as onpopstate) and use slightly different structures (history rather than History) if you would want to build your own solution.

这也是要注意的，有可能用自己的队列数组，它为您提供了更多的控制建立这个很有用，但不会在结合浏览器的后退按钮的工作。这是一个大问题，与浏览器的网站，不过是更容易的情况下，你正在建设一个科尔多瓦（又名的phonegap ）Web应用程序。

It is also useful to note that it is possible to build this with your own queue array which gives you a lot more control, but will not work in combination with the browser's back button. This is a big issue with browser sites, however is far easier in case you are building a cordova (a.k.a. phonegap) web application.

^{1刚刚读到它，它似乎做一些处理历史的href=\"http://documentcloud.github.com/backbone/#History\">，其中<青霉>可能的使其更加复杂以上述技术相结合。}

^{1 Just read about it and it appears to do some history handling of its own, which might make it more complex to integrate the technique described above.}

这篇关于如何实现在单一页面的移动Web应用程序我自己的历史堆栈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！