Czy to właściwy sposób korzystania z History.js?

Udało mi się skompletować uproszczony pełny przykład History.js za pomocą trzech linków, aby załadować fragmenty treści z całej strony bez aktualizacji strony i aktualizacji historii przeglądarki.Czy to właściwy sposób korzystania z History.js?

Oto fragmenty kodu dowiemy się z - kompletny przykład praca jest tutaj 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>

Chciałbym wiedzieć, czy jest to prawidłowe wykorzystanie. Poprzednia wersja była w stanie powiązać zdarzenie za pomocą adresów URL #. Nie widziałem żadnych przykładów wiążących zdarzeń dla adresów URL z tą najnowszą wersją, więc użyłem zdarzenia kliknięcia .on(), aby zadzwonić do Historii i posortować, który link został tam kliknięty.

Nie jestem pewien, czy jest to najlepszy sposób osiągnięcia tego w tym przykładzie.

Źródło

2012-11-07 dansalmo

Po pracy nad tym trochę, wymyśliłem prosty, ale kompletny przykład jak korzystać z najnowszego History.js. Oto working jsfiddle example że robi Ajax ładunki 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>

Źródło

2012-11-09 19:12:31 dansalmo

Jestem trochę późno do partii, ale warto zauważyć, że 'History.pushState ({urlPath: window.location.pathname()}, $ (” title "). text(), State.urlPath);' spowoduje zgłoszenie błędu, ponieważ window.location.pathname() nie jest funkcją. Po prostu usuń nawiasy i działa jak urok. – indextwo

Dzięki za złapanie tego. Nie wiem, jak to przegapiłem, ponieważ myślałem, że wklejałem go z działającej wersji. – dansalmo

@dansalmo, Jeśli zaimplementuję przykład podobny do pokazanego powyżej (http://stackoverflow.com/a/13314438/1867808), to gdzie umieścić dodatkową zawartość względem pliku index.html? Czy umieściłem go w pliku response.html, który znajduje się w tym samym folderze co plik index.html? –

Czy to właściwy sposób korzystania z History.js?

Odpowiedz

Powiązane problemy