Nawigacja jQuery Mobile - Dlaczego stan jest pusty?

Question

Używam $.mobile.navigate("#test-page", {id:123}), aby przejść do strony dodatkowej.

Nawigacja ze strony na stronę działa dobrze ... ale stan jest pusty!

Dokumenty wyraźnie pokazują, że stan powinien zawierać wszystkie informacje, których potrzebuję podczas wykonywania nawigacji.

Jest to kod używam:

$(window).on('navigate', function(event, data) { 
    console.log("navigated", data); 
    console.log(data.state.info); 
    console.log(data.state.direction); 
    console.log(data.state.url); 
    console.log(data.state.hash); 
    if (data.state.hash === "test-page") { 
    console.log("Test page", data.state.id); 
    } 
}); 

Niestety dane są przekazywane jako pusty:

{ 
    state:{} 
} 

HTML jest następujący:

<div id="test-home" data-role="page"> 

     <div data-role="header"> 
      <h1>Test Home</h1> 
     </div> 
     <div data-role="content"> 
      <div id="test-btn"> 
      Click DIV for TEST page 
      </div> 
     </div> 
     <div data-role="footer"> 
     </div> 

    </div> 


    <div id="test-page" data-role="page"> 
    <div data-role="header"> 
      <h1>Test Page</h1> 
    </div> 

    <div data-role="content"> 
     Test page 

    </div> 
    </div> 

---

Mam nadzieję, że ktoś może pomóc. Dzięki!

Answer 1

$.mobile.navigate i navigatewydarzenie, są wykorzystywane do śledzenia historii i przekazać URL/pobierania danych z adresu URL. Działają z nawigacją przeglądarki (wstecz/do przodu).

Aby dynamicznie przekazywać dane między stronami za pomocą aplikacji internetowej przy użyciu nawigacji wewnętrznej, należy użyć $.mobile.changePage.

Zasoby:

• $.mobile.navigate()
• Navigate
• $.mobile.changePage()

Wpisz poniższy kod aby przejść dane ze strony na drugą.

$.mobile.changePage('store.html', { 
dataUrl: "store.html?id=123", 
data: { 
    'id': '123' 
}, 
reloadPage: true // force page to reload 
}); 

Aby pobrać dane

$('.selector').on('pagebeforeshow', function() { 
var values = $(this).data("url").split("?")[1]; 
id = values.replace("id=", ""); 
console.log(id); 
}); 

Answer 2

wiem, że to jest stary pytanie, ale odpowiedź @ Omara może ulec poprawie.

W rzeczywistości, to jest możliwe użycie pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition i pagecontainerchange (są wypalane w tej kolejności) i wewnątrz uchwytu można odczytać właściwość history.state, że w tym momencie jest aktualizowana z nowy stan.

Tak więc, na przykład, można napisać (zainicjować rzeczy, które muszą stronę już sformatowany, np Google Maps):

$(document).on("pagecontainershow", function(e, data) { 
    console.log("pagecontainershow: " + JSON.stringify(history.state));  
}); 

ta działa we wszystkich przypadkach: jeśli klikniesz na link (z hash, np. #user), jeśli poruszasz się za pomocą przycisków wstecz i do przodu, jeśli używasz $.mobile.navigate, a także dla.

Co więcej, można przekazywać złożone dane, nie ograniczając się do ograniczeń ciągów zapytań.

Zasoby:

• Pagecontainer
• History