单击带有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对象的id和作为值的实际html内容.例如

'#header'=>'标题div中的内容'

如上所述,更换工作正常.我在标题中输出一个随机数.链接上的每次点击都会在标题中吐出另一个随机数.但是,如果按下后退按钮,数字保持不变,只会恢复标题(也是随机数).

Answer 1

好的,我得到了它,也要感谢Tobias Cohen的提示.

必须将加载的数据存储在历史对象(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/');