13

ローカルテストアプリケーションに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は、キーとしてhtmlオブジェクトのIDを含み、値として実際のhtmlコンテンツを含むjson配列です。例えば

'#header'=>'ヘッダーdivのコンテンツ'

前述のように、交換は正常に機能します。ヘッダーに乱数を出力します。リンクをクリックするたびに、ヘッダーに別の乱数が吐き出されます。ただし、戻るボタンを押すと番号は同じままで、タイトルのみが復元されます（乱数も復元されます）。

4

1 に答える 1

12

わかりました。ヒントをくれたTobiasCohenにも感謝します。

ロードされたデータを履歴オブジェクト（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);

});

ご覧のとおり、statechangeごとに、State.data.clipsにアクセスして、htmlコンテンツを置き換えることができます。

注：History.pushState（）を呼び出すときにも、状態変更が発生します。つまり、私の最初の質問では、2番目のコードスニペットは、そこでコンテンツ操作を行っているという事実で間違っています。その必要はありません。History.pushState（）を呼び出すだけで、statechangeコールバック内でコンテンツ操作を実行できます。

完全を期すために、これがクリップを履歴オブジェクトにプッシュする方法です。

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');
于 2011-10-31T10:56:23.123 に答える