jquery - history.js の使い方

Question

私のサイトでは、左側にナビゲーション バーがあります。リンクをクリックすると、ページの #container div が変更されますが、ajax を介して他には何も変更されません。#container div だけを状態で前後に移動させる前後ボタンを配置したいと考えています。history.js がこれに最適であると読み、html5 history api を使用しましたが、問題を解決する方法がわかりません。また、更新ボタンを実装するにはどうすればよいですか?

Answer 1

あなたが探しているのはPJAXのようなもののようです。

明確にするために、HTML5 History API（History.jsが実装/シム）は、アプリケーションの状態を直接維持しません。むしろ、ウィンドウURLの変更を、実際に変更をレンダリングする機能にマッピングするためのメカニズムを提供します。readmeは、これがどのように達成されるかについての洞察を提供します。

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState(); 
    History.log(State.data, State.title, State.url);
});

状態をログに記録する代わりに、（PJAXまたは同様のライブラリを使用せずに）コンテナのコンテンツを変更する場合は、#container呼び出すたびにコンテンツを保存しpushState、ハンドラ関数を調整して次のようにします。

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState(); 
    $('#container').empty().append(State.data.content);
});

History.pushState({content:"Hello, world!"}, "State 1", "?state=1");

もちろん、状況の詳細を反映するためにこれを変更する必要があります。