Ripristino del contenuto quando si fa clic sul pulsante Indietro con History.js

Question

Ho implementato History.js su un'applicazione di test locale. Tutto sembra funzionare, tuttavia se premo il pulsante Indietro nel browser, il contenuto precedente non viene ripristinato.

Devo effettivamente caricare nuovamente il contenuto manualmente (ad esempio, effettuare un'altra chiamata Ajax) quando l'utente preme il pulsante Indietro? Allora come fa Github a farlo? Vedo che non fanno un'altra chiamata ajax quando si fa clic sul pulsante Indietro nell'albero del codice.

Ecco il mio codice:

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


    $('a').each(function(index, link) { 

    if ($(link).attr('data-ajax-disabled') != 'true') { 

     $(link).click(function(event) 
     { 

     var clips = $(this).attr('data-ajax-clips') || ''; 

     $.ajax($(this).attr('href'), 
     { 
      data: {_clips:clips}, 
      success: function(data) 
      { 

       var data = $.parseJSON(data); 


       History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/'); 


       $.each(data.clips, function(key, val) 
       { 
        $(key).replaceWith(val); 
       }); 

      } 
     }); 

     return false; 

     }); 
    } 
    }); 

data.clips è un array JSON che contiene id degli oggetti HTML come chiave e il contenuto effettivo HTML come valore. Per esempio

=> 'contenuti nell'intestazione div' '#header'

Come osservato, la sostituzione funziona bene. Eseguo un numero casuale nell'intestazione. Ogni clic su un link sputa un altro numero casuale nell'intestazione. Tuttavia, se spingo il pulsante Indietro il numero rimane lo stesso, verrà ripristinato solo il titolo (anche il numero casuale).

Answer 1

Ok ho capito, anche grazie a Tobias Cohen per il suggerimento.

Uno deve memorizzare i dati caricati nell'oggetto di cronologia (State.data). In primo luogo vediamo come il callback stateChange cambiato:

History.Adapter.bind(window, 'statechange', function() 
{ 

    var State = History.getState(); 

    $.each(State.data.clips, function(key, val) 
    { 
     $(key).replaceWith(val); 
    }); 

    History.log(State.data, State.title, State.url); 

}); 

Come si può vedere, su ogni stateChange Posso accedere State.data.clips e sostituire il contenuto HTML.

NOTA: uno statechange si verifica anche quando si chiama History.pushState(). Ciò significa che nella seconda domanda il secondo frammento di codice è errato nel fatto che eseguo la manipolazione del contenuto. Non ce n'è bisogno. Basta chiamare History.pushState() ed eseguire qualsiasi manipolazione del contenuto all'interno del callback di statechange.

Così, per completezza, questo è come mi spingo le clip nell'oggetto storia:

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');