Я реализовал History.js в локальном тестовом приложении. Кажется, все работает, однако, если я нажму кнопку «Назад» в браузере, предыдущее содержимое не восстановится.
Действительно ли мне нужно снова загружать контент вручную (т.е. делать еще один вызов ajax), когда пользователь нажимает кнопку возврата? Тогда как github это делает? Я вижу, что они не делают еще один вызов ajax при нажатии кнопки возврата в дереве кода.
Вот мой код:
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-объектов в качестве ключа и фактическое HTML-содержимое в качестве значения. Например
'# header' => 'content in header div'
Как уже отмечалось, замена работает нормально. Я вывожу случайное число в шапку. При каждом нажатии на ссылку в заголовке отображается другое случайное число. Однако, если я нажму кнопку «Назад», число останется прежним, будет восстановлен только заголовок (также случайное число).