2011-10-31 18 views
13

ローカルテストアプリケーションでHistory.jsを実装しました。すべてがうまくいくようですが、ブラウザの戻るボタンを押すと、以前のコンテンツは復元されません。History.jsで戻るボタンをクリックするとコンテンツが復元される

ユーザーが戻るボタンを押したときに実際にもう一度手動でコンテンツを読み込む必要がありますか(つまり、別のajax呼び出しを作成する必要がありますか)。それでギスプルはどうしますか?私はコードツリーのボタンをクリックすると、別の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コンテンツなどのHTMLオブジェクトのIDを含んでJSON配列である:

は、ここに私のコードです。例えば

'#ヘッダー' => 'ヘッダDIVのコンテンツ' に述べたよう

ため、交換が正常に動作します。ヘッダーに乱数を出力します。リンクをクリックするたびに、ヘッダー内の別の乱数が吐き出されます。しかし、戻るボタンを押すと数字は変わらず、タイトルだけが復元されます(乱数も)。

+2

はい、あなたはブラウザの履歴機能をオーバーライドする場合は、ユーザーがなったときに、正しいコンテンツを表示するための責任があります前後する。同じコンテンツの別のAJAX呼び出しを避けるには、 '.hide()'を使ってページ上に非表示にしたり、HTMLを変数に格納したり、必要に応じて読み込んだりすることができます。 –

答えて

12

オハイオ州ヒントについては、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); 

}); 

、それぞれのStateChangeに私はState.data.clipsにアクセスし、HTMLコンテンツを置き換えることができます。

注記:State.changeは、History.pushState()を呼び出すときにも発生します。つまり、私の最初の質問では、2番目のコードスニペットは、そこでコンテンツ操作を行うという点で間違っています。それは必要ありません。 History.pushState()を呼び出して、statechangeコールバック内のコンテンツ操作を行うだけです。

だから、完全を期すために、これは私が履歴オブジェクトにクリップを押し込む方法です:

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/'); 
関連する問題