jQuery Mobile navigate - Perché lo stato è vuoto?

Question

Sto utilizzando $.mobile.navigate("#test-page", {id:123}) per passare a una pagina secondaria.

La navigazione da una pagina all'altra funziona correttamente .... ma lo stato è vuoto!

I documenti mostrano chiaramente che lo stato deve contenere tutte le informazioni di cui ho bisogno quando viene eseguita la navigazione.

Questo è il codice che sto utilizzando:

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

Purtroppo i dati vengono passati come vuoto:

{ 
    state:{} 
} 

L'HTML è il seguente:

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

---

Spero che qualcuno possa aiutarti. Grazie!

Answer 1

$.mobile.navigate e navigateevento, sono utilizzati per tracciare la storia URL e passare/recuperare i dati da URL. Funzionano con la navigazione del browser (indietro/avanti).

Per passare dinamicamente i dati tra le pagine all'interno di un'applicazione Web utilizzando la navigazione interna, utilizzare $.mobile.changePage.

Risorse:

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

Utilizzare il codice qui sotto per passare i dati da pagina all'altra.

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

Per recuperare i dati

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

Answer 2

So che è una vecchia questione, ma la risposta di @ Omar può essere migliorata.

In realtà, è possibile utilizzare pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition e pagecontainerchange (sono sparati in questo ordine) e all'interno del gestore è possibile leggere la proprietà history.state, che a quel punto viene aggiornato con il nuovo stato.

Così, per esempio, è possibile scrivere (per inizializzare le cose che hanno bisogno di pagina già formattato, ad esempio Google Maps):

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

Questo funziona in tutti i casi: se si fa clic su un link (con un hash, ad esempio #user), se si naviga con i pulsanti Indietro e Avanti, se si utilizza $.mobile.navigate e anche per window.history.back().

Inoltre, è possibile trasmettere dati complessi, non limitati ai vincoli della stringa di query.

Risorse:

• Pagecontainer
• History