History.js getState() na pageload

Question

Jestem trochę zdezorientowany, w jaki sposób History.js działa na ładowanie strony. Zrobiłem kilka eksperymentów, ale wyniki wydają się nieokreślone.

Moja strona internetowa jest wyszukiwarką, a zapytanie jest przechowywane w parametrach adresu URL: ?Query=cats. Strona jest napisana wyłącznie w javascript. History.js działa świetnie, gdy wykonuję nowe wyszukiwanie, nowe zapytanie jest aktualizowane, a stan jest przesuwany.

Mój problem polega na tym, jak utworzyć stan początkowy, jeśli użytkownik ręcznie wprowadzi adres URL, w tym parametr Query. Każdy sposób, w jaki próbuję to zrobić, skutkuje dwukrotnym uruchomieniem zapytania. Dwa przypadki użycia, które wydają się być sprzeczne, to:

1. Użytkownik ręcznie wprowadza adres URL (mydomain.com?Query=cats) na pasku adresu i wciska enter.
2. Użytkownik przechodzi na stronę zewnętrzną, a następnie kliknie przycisk Wstecz

w obu przypadkach, obciążenia JavaScript, a więc wygląda na parametry URL do generowania początkowego stanu.

Jednak w drugim przypadku History.js wywoła zdarzenie ze stateczkowaniem oraz.

kod konieczne:

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

i w $ (document) .ready mam

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

Czy istnieje lepszy sposób obsłużyć tworzenia stanu początkowego od parametrów URL?

Answer 1

Ponieważ miałem podobny problem do Ciebie, to co zrobiłem, to zdefiniowanie funkcji związanej z statechange jako nazwanej funkcji, a następnie wszystko, co miałem, uruchomiono, gdy ładowano również stronę.

To działało lepiej niż próba parsowania URI lub cokolwiek innego, mam nadzieję, że to pomaga.

Answer 2

ten sposób wybrałem to zrobić (na podstawie odpowiedzi Fabiano), aby zapisać początkowych parametrów stanu

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

Oczywiście jeśli używasz innego obciążenia DOM jak jQuery można po prostu umieścić renderHistory(); w środku, ale w ten sposób nie wymaga żadnych dodatkowych bibliotek. Powoduje zmianę stanu tylko raz i zastępuje pusty stan początkowy jednym zawierającym dane. W ten sposób, jeśli użyjesz ajaxa, aby uzyskać initData w innym, i nie będzie potrzeby, aby uzyskać go następnym razem, gdy osoba wróci na stronę, i zawsze możesz ustawić renderowany na false, aby powrócić do początkowego stanu strony/odświeżenia zadowolony.