jQuery मोबाइल नेविगेट - राज्य खाली क्यों है?

Question

मैं द्वितीयक पृष्ठ पर नेविगेट करने के लिए $.mobile.navigate("#test-page", {id:123}) का उपयोग कर रहा हूं।

पृष्ठ दर पृष्ठ नेविगेशन ठीक काम करता है .... लेकिन राज्य खाली है!

डॉक्स स्पष्ट रूप से पता चलता है कि राज्य में सभी जानकारी जब नेविगेशन किया जाता है मैं की जरूरत होनी चाहिए।

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

---

:

{ 
    state:{} 
} 

एचटीएमएल निम्नलिखित है:

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

दुर्भाग्य से डेटा खाली के रूप में पारित हो जाता है:

इस कोड मैं का उपयोग कर रहा है उम्मीद है कि कोई मदद कर सकता है। धन्यवाद!

Answer 1

$.mobile.navigate और navigateघटना, URL के इतिहास पर नज़र रखने और पारित/URL से डेटा लाने के लिए इस्तेमाल किया जाता है। वे ब्राउज़र के नेविगेशन (पीछे/आगे) के साथ काम करते हैं।

गतिशील रूप से एक webapp आंतरिक नेविगेशन का उपयोग कर के उन पृष्ठों के बीच डेटा पास करने के लिए, $.mobile.changePage का उपयोग करें।

संसाधन:

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

उपयोग नीचे कोड दूसरे करने के लिए पेज से डेटा पारित करने के लिए।

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

डेटा

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

Answer 2

प्राप्त करने के लिए मुझे पता है यह एक पुराने सवाल है, लेकिन @ उमर के जवाब सुधार किया जा सकता।

वास्तव में, यह pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition और pagecontainerchange (वे इस क्रम में सक्रिय कर रहे हैं) और हैंडलर के अंदर आप संपत्ति history.state पढ़ सकते हैं, कि उस बिंदु पर के साथ अद्यतन किया जाता है का उपयोग करना संभव है नया राज्य

तो, उदाहरण के लिए, आप लिख सकते हैं (चीजों पेज पहले से ही स्वरूपित, जैसे गूगल मैप्स की जरूरत है कि प्रारंभ करने में):

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

यह सभी मामलों में काम करता है: एक साथ यदि आप एक लिंक पर क्लिक करें (हैश, उदाहरण के लिए #user), यदि आप पीछे और आगे बटन के साथ नेविगेट करते हैं, तो यदि आप $.mobile.navigate और window.history.back() के लिए भी उपयोग करते हैं।

इसके अलावा, आप जटिल डेटा पास कर सकते हैं, क्वेरी स्ट्रिंग बाधाओं तक ही सीमित नहीं है।

संसाधन:

• Pagecontainer
• History