jQuery Mobile Navigation - Warum ist der Status leer?

Question

Ich verwende $.mobile.navigate("#test-page", {id:123}), um zu einer sekundären Seite zu navigieren.

Die Navigation von Seite zu Seite funktioniert gut .... aber der Zustand ist leer!

Die Dokumente zeigen deutlich, dass der Staat alle Informationen enthalten sollte ich brauche, wenn die Navigation durchgeführt wird.

Dies ist der Code Ich verwende:

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

Leider Daten werden als leer übergeben:

{ 
    state:{} 
} 

Die HTML ist die folgende:

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

---

Hoffe, dass jemand helfen kann. Vielen Dank!

Answer 1

$.mobile.navigate und navigateEreignis, werden verwendet, URL-Verlauf zu verfolgen und zu übergeben/Abrufdaten von URL. Sie arbeiten mit der Navigation des Browsers (zurück/vorwärts).

Um Daten zwischen den Seiten dynamisch innerhalb eines webapp mit internem Navigationsgeben, verwende $.mobile.changePage.

Ressourcen:

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

Verwenden Sie den Code unten Daten von Seite zu einem anderen zu übergeben.

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

Um Daten

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

Answer 2

Ich weiß, es ist eine alte Frage, aber abrufen @ Omar Antwort verbessert werden kann.

In der Tat ist es möglich, zu verwenden pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition und pagecontainerchange (sie sind in dieser Reihenfolge gezündet werden) und innerhalb des Handlers können Sie die Eigenschaft history.state, dass an diesem Punkt gelesen werden, mit dem aktualisierten neuer Staat.

So zum Beispiel können Sie schreiben (um die Dinge zu initialisieren, der die Seite bereits formatiert, zB Google Maps benötigen):

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

Dies funktioniert in allen Fällen: Wenn Sie auf einen Link klicken (mit einem Hash, zB #user), wenn Sie mit der Zurück- und vorwärts-Tasten navigieren, wenn Sie $.mobile.navigate verwenden und auch für window.history.back().

Darüber hinaus können Sie komplexe Daten übergeben, nicht beschränkt auf die Query String Einschränkungen.

Ressourcen:

• Pagecontainer
• History