History.js getState() a pageload

Question

Sono un po 'confuso su come funziona History.js al caricamento della pagina. Ho fatto alcuni esperimenti ma i risultati sembrano indeterministici.

Il mio sito Web è un motore di ricerca e la query è memorizzata nei parametri URL: ?Query=cats. Il sito è scritto esclusivamente in javascript. History.js funziona alla grande quando faccio una nuova ricerca, la nuova query viene aggiornata e lo stato viene premuto.

Il mio problema è come creare uno stato iniziale se l'utente inserisce manualmente un URL che include un parametro Query. Ogni modo in cui cerco di farlo finisce con il risultato di eseguire la query di ricerca due volte, in alcuni casi. I due casi d'uso che sembrano essere in conflitto sono:

1. L'utente immette manualmente l'URL (mydomain.com?Query=cats) nella barra degli indirizzi e preme Invio.
2. utente passa a una pagina esterna, e quindi fa clic sul pulsante Indietro

In entrambi i casi, i carichi javascript, e quindi guarda ai parametri URL per generare uno stato iniziale.

Tuttavia, nel secondo caso, History.js attiverà l'evento statechange e.

codice necessario:

History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate 
     var s = History.getState(); 
     if(s.data["Query"]){ 
      executeQuery(s.data); 
     } 
    }); 

e $ (document) .ready ho

// Get history from URL 
    s = getQueryObjectFromUrl(location.href); 
    if(s["Query"]){ 
     History.pushState(s,'',$.param(s)) 
    } 

Esiste un modo migliore per gestire la creazione di uno stato iniziale di parametri URL?

Answer 1

Come ho avuto un problema simile al tuo, quello che ho fatto è stato definire la funzione associata a un statechange come una funzione con nome, e poi tutto quello che avevo in esecuzione quando la pagina viene caricata pure.

Ha funzionato meglio del tentativo di analizzare l'URI o qualsiasi altra cosa, spero che sia d'aiuto.

Answer 2

Questo è il modo che ho scelto di farlo (in base alla risposta di Fabiano) per memorizzare i parametri di stato iniziali

var renderHistory = function() { 
    var State = History.getState(), data = State.data; 
    if (data.rendered) { 
     //Your render page methods using data.renderData 
    } else { 
     History.replaceState({ rendered: true, renderData: yourInitData}, "Title You Want", null); 
    } 
}; 
History.Adapter.bind(window, 'statechange', renderHistory); 
History.Adapter.onDomLoad(renderHistory); 

Naturalmente se si utilizza una diversa DOM carico come jQuery vi può semplicemente inserire renderHistory(); al suo interno, ma in questo modo non richiede alcuna libreria aggiuntiva. Provoca una modifica di stato solo una volta e sostituisce lo stato iniziale vuoto con uno contenente i dati. In questo modo se usi ajax per ottenere initData all'interno dell'altro, e non avrà bisogno di ottenerlo la prossima volta che la persona torna alla pagina, e puoi sempre impostare il rendering su false per tornare allo stato iniziale della pagina/aggiornare soddisfare.