单击带有History.js的后退按钮时恢复内容 [英] Restoring content when clicking back button with History.js
问题描述
我在本地测试应用程序上实现了History.js.一切似乎都有效,但是如果我按下浏览器中的后退按钮,之前的内容就无法恢复。
I've implemented History.js on a local test application. Everything seems to work, however if I press the back button in the browser, the previous content does not get restored.
我是否真的必须再次手动加载内容(当用户按下后退按钮时,即进行另一个ajax调用?然后github如何做到这一点?我看到他们在点击代码树中的后退按钮时不再进行另一个ajax调用。
Do I actually have to load the content manually again (i.e. make another ajax call) when user presses the back button? Then how does github do it? I see they don't make another ajax call when clicking back button in the code tree.
这是我的代码:
History.Adapter.bind(window,'statechange',function()
{
var State = History.getState();
History.log(State.data, State.title, State.url);
});
$('a').each(function(index, link) {
if ($(link).attr('data-ajax-disabled') != 'true') {
$(link).click(function(event)
{
var clips = $(this).attr('data-ajax-clips') || '';
$.ajax($(this).attr('href'),
{
data: {_clips:clips},
success: function(data)
{
var data = $.parseJSON(data);
History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/');
$.each(data.clips, function(key, val)
{
$(key).replaceWith(val);
});
}
});
return false;
});
}
});
data.clips是一个json数组,其中包含html对象的id作为键,实际的html内容为值。例如
data.clips is a json array which contains id's of html objects as key and the actual html content as value. For example
'#header'=>'标题div中的内容'
'#header' => 'content in header div'
如上所述,更换工作正常。我在标题中输出一个随机数。链接上的每次点击都会在标题中吐出另一个随机数。但是,如果按下后退按钮,数字保持不变,只会恢复标题(也是随机数)。
As noted, the replacement works fine. I output a random number in the header. Every click on a link spits out another random number in the header. However, if I push the back button the number stays the same, only the title will be restored (also random number).
推荐答案
好的,我得到了它,也感谢Tobias Cohen提示。
Ok I got it, also thanks to Tobias Cohen for the hint.
必须将加载的数据存储在历史对象(State.data)中。首先让我们看看statechange回调是如何改变的:
One has to store the loaded data in the history object (State.data). First let's see how the statechange callback changed:
History.Adapter.bind(window, 'statechange', function()
{
var State = History.getState();
$.each(State.data.clips, function(key, val)
{
$(key).replaceWith(val);
});
History.log(State.data, State.title, State.url);
});
正如您所看到的,在每个状态变化中,我可以访问State.data.clips并替换html内容。
As you can see, on each statechange I can access State.data.clips and replace the html content.
注意:调用History.pushState()时也会发生状态转换。这意味着在我最初的问题中,第二个代码片段是错误的,因为我在那里进行内容操作。没有必要。只需调用History.pushState()并在statechange回调中进行任何内容操作。
NOTE: A statechange does also happen when calling History.pushState(). That means in my initial question the second code snippet is wrong in the fact that I do the content manipulation in there. There's no need for it. Just call History.pushState() and do any content manipulation within the statechange callback.
因此,为了完整性,我将这些剪辑推送到历史对象中:
So for completeness, this is how I push the clips into the history object:
History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');
这篇关于单击带有History.js的后退按钮时恢复内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!