これはHistory.jsを使用する適切な方法ですか？

単純な完全なHistory.jsの例を3つのリンクを使ってまとめて、ページを更新することなく、ブラウザの履歴を更新しながら、フルページからコンテンツの断片を読み込むことができました。ここでこれはHistory.jsを使用する適切な方法ですか？

はreleventコードスニペットはある - 完全な作業例ここhttp://jsfiddle.net/PT7qx/show

<a href="/page-header">Page Header</a> 
<a href="/login-form">Login Form</a> 
<a href="/nothing">Nothing</a> 

<script> 
var History = window.History; 
if (!History.enabled) { 
    return false; 
} 

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

    if (State.title == 'Page Header') { 
     $('#content').load('/user/login/ .pageHeader > *'); 
    } 

    if (State.title == 'Login Form') { 
     $('#content').load('/user/login/ #common-form > *'); 
    } 

    if (State.title == 'Nothing') { 
     $('#content').empty() 
    } 
}); 

$('body').on('click', 'a', function(e) { 

    var urlPath = $(this).attr('href'); 
    var Title = $(this).text(); 
    History.pushState(null, Title, urlPath); 

    // prevents default click action of <a ...> 
    return false; 
}); 
<\script>

である私は、これは正しい用法であるかどうかを知りたいです。以前のバージョンでは、＃urlを使用してイベントにバインドする機能がありました。この最新バージョンではイベントをURLにバインドする例は見当たらなかったので、.on（）クリックイベントを使用してHistoryを呼び出し、クリックされたリンクをソートしました。

これがこの例でこれを達成する最良の方法であるかどうかはわかりません。

出典

2012-11-07 dansalmo

これ以上の作業をした後、最新のHistory.jsの使い方のシンプルで完全な例を考え出しました。、$（」：ここでHTML fragments hosted on Github

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Simple History.js Ajax example by dansalmo</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript" src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script> 

    <style type='text/css'> 
     .hidden { 
     display: none; 
     visibility: hidden; 
     } 
    </style> 
    </head> 
    <body> 
    <a href="/home">Home</a> 
    <a href="/about">About</a> 
    <a href="/contact">Contact</a> 
    <a href="/other">Other</a> 

    <p>The whole page will not re-load when the content below is updated, yet the URL is clean and the back button works!<p><br /> 
    <div id="content"> 
     <div id="home">Home Page content</div> 
    </div> 
    <br /> 
    <p>The content div will be updated with a selected div fragment from an HTML file hosted on github, however the broswer will see each content update request as a part of the page history so that the back button can be used.</p> 
    <br /> 
    <p>Adding more menu items is as simple as adding the new links and their corresponding html fragments.<p> 
    <div id="hidden_content" class="hidden"></div> 
    </body> 
    <script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
    var History = window.History; 
    if (History.enabled) { 
     State = History.getState(); 
     // set initial state to first page that was loaded 
     History.pushState({urlPath: window.location.pathname}, $("title").text(), State.urlPath); 
    } else { 
     return false; 
    } 

    var loadAjaxContent = function(target, urlBase, selector) { 
     $(target).load(urlBase + ' ' + selector); 
    }; 

    var updateContent = function(State) { 
     var selector = '#' + State.data.urlPath.substring(1); 
    if ($(selector).length) { //content is already in #hidden_content 
     $('#content').children().appendTo('#hidden_content'); 
     $(selector).appendTo('#content'); 
    } else { 
     $('#content').children().clone().appendTo('#hidden_content'); 
     loadAjaxContent('#content', State.url, selector); 
    } 
    }; 

    // Content update and back/forward button handler 
    History.Adapter.bind(window, 'statechange', function() { 
     updateContent(History.getState()); 
    }); 

    // navigation link handler 
    $('body').on('click', 'a', function(e) { 
     var urlPath = $(this).attr('href'); 
     var title = $(this).text(); 
     History.pushState({urlPath: urlPath}, title, urlPath); 
     return false; // prevents default click action of <a ...> 
    }); 
    });//]]> 

    </script> 
</html>

出典

2012-11-09 19:12:31 dansalmo

のAjaxの負荷が私は少し遅れて相手にだけど、それは 'History.pushState（{window.location.pathname（）URLパス}は注目に値しますんworking jsfiddle exampleですtitle "）。text（）、State.urlPath）;' window.location.pathname（）は関数ではないので、エラーをスローします。カッコを取り除くだけで魅力的です。 – indextwo

それをキャッチするためにありがとう。私がそれを実際のバージョンから貼り付けていると思って以来、私はそれを見逃していたのか分かりません。 – dansalmo

@dansalmo上記のような例（http://stackoverflow.com/a/13314438/1867808）を実装すると、index.htmlファイルに関連して追加のコンテンツはどこに置かれますか？私はそれをindex.htmlと同じフォルダにあるresponse.htmlに入れますか？ –

これはHistory.jsを使用する適切な方法ですか？

答えて

関連する問題