Wie benutzt man history.js?

Question

In meiner Website befindet sich eine Navigationsleiste auf der linken Seite. Wenn ich auf die Links klicke, ändert sich das #container div auf meiner Seite, aber nichts anderes durch Ajax. Ich möchte Buttons hin- und herschieben, die nur das #container div im Zustand zurück und vorwärts bringen. Ich habe gelesen, dass history.js das Beste dafür wäre, und ich habe die html5-History-API durchgesehen, aber ich verstehe nicht, wie ich mein Problem lösen kann. Wie würde ich darüber hinaus eine Schaltfläche zum Aktualisieren implementieren?

Answer 1

Es klingt wie das, was Sie suchen, ist etwas wie PJAX.

Nur um klar zu sein, die HTML5 History API (die History.js implementiert/Shims) nicht den Status Ihrer Anwendung direkt erhalten. Stattdessen bietet es einen Mechanismus zum Zuordnen von Änderungen in der Fenster-URL zu einer Funktion, die für das tatsächliche Rendern der Änderungen verantwortlich ist. Die readme bietet einen Einblick in, wie dies erreicht werden könnte:

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

Wenn stattdessen den Zustand der Anmeldung, in der Sie den Behälterinhalt verändern (ohne PJAX oder eine ähnliche Bibliothek), können Sie stattdessen den Inhalt speichern von #container Sie jedes Mal pushState aufrufen und die Handler-Funktion einstellen, so etwas zu tun:

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"); 

natürlich müssen Sie dies ändern, um die Besonderheiten Ihrer Situation zu reflektieren.