Восстановление содержимого при нажатии кнопки «Назад» с помощью History.js

Question

Я реализовал 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 в header div'

Как уже отмечалось, замена работает нормально. Я вывожу случайное число в заголовке. При каждом нажатии на ссылку в заголовке появляется другое случайное число. Однако, если я нажму кнопку «Назад», число останется прежним, будет восстановлен только заголовок (также случайное число).

Answer 1

Хорошо, я понял, также спасибо Тобиасу Коэну за подсказку.

Нужно хранить загруженные данные в историческом объекте (State.data). Сначала давайте посмотрим, как изменился обратный вызов statechange:

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-контент.

ПРИМЕЧАНИЕ. Смена состояний также происходит при вызове History.pushState (). Это означает, что в моем первоначальном вопросе второй фрагмент кода неверен в том смысле, что я выполняю там манипулирование контентом. Там нет необходимости в этом. Просто вызовите History.pushState () и выполните любые манипуляции с контентом в обратном вызове statechange.

Итак, для полноты, вот как я вставляю клипы в объект истории:

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');