Ist dies eine richtige Art und Weise zu verwenden History.js?

War ich in der Lage, zusammen eine vereinfachte abzuschließen History.js Beispiel mit drei links zu Last-Fragmente von Inhalten von einer vollständigen Seite ohne Aktualisierung der Seite und während der Aktualisierung der browser-history.

Hier sind die relevanten code-snippets - ein funktionsfähiges Beispiel ist hier 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>

Ich würde gerne wissen, ob dies ist die korrekte Verwendung. Die vorhergehende version hatte eine Fähigkeit zum binden an ein Ereignis mit der # - urls. Ich habe nicht gesehen, alle Beispiele für die Bindung von Ereignissen, die auf urls mit dieser neuesten version, also habe ich die .auf() klicken-Ereignis aufrufen, Geschichte und sortiert aus, was link geklickt wurde.

Ich bin nicht sicher, ob dies der beste Weg, dies zu erreichen für dieses Beispiel.

InformationsquelleAutor dansalmo | 2012-11-07

  1. 22

    Nach der Arbeit an diesem einige mehr, die ich mit gekommen sind ein einfaches, aber vollständiges Beispiel für die Verwendung der neuesten History.js. Hier ist arbeiten jsfiddle Beispiel, dass nicht Ajax lädt der HTML-Fragmente, die auf Github gehostet

    <!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>
    Ich bin ein bisschen spät zur party, aber es ist erwähnenswert, dass History.pushState({urlPath: window.location.pathname()}, $("title").text(), State.urlPath); wirft einen Fehler, als Fenster.Lage.pathname() ist keine Funktion. Einfach entfernen Sie die Klammern und es funktioniert wie ein Charme.
    Danke für den Fang. Nicht sicher, wie ich es verpasst, da ich dachte, ich war in einfügen aus einer funktionierenden version.
    Wenn ich implementieren, ein Beispiel, wie du es oben gezeigt haben (stackoverflow.com/a/13314438/1867808) wo bekomme ich zusätzliche Inhalte, die relativ zu der index.html Datei? Lege ich es in eine response.html das ist im gleichen Ordner wie index.html?
    Ja. Zumindest mit dem server-framework das ich verwende. Ich nutze die Google App Engine mit Python 2.7.
    bin ich zu senden ganze Seite auf den Ziel-link oder nur einen Teil der Seite der Ziel-link?

    InformationsquelleAutor dansalmo

Schreibe einen Kommentar