Điều hướng trên thiết bị di động jQuery - Tại sao trạng thái trống?

Question

Tôi đang sử dụng $.mobile.navigate("#test-page", {id:123}) để điều hướng đến trang phụ.

Điều hướng từ trang này sang trang khác hoạt động tốt .... nhưng trạng thái trống!

Tài liệu hiển thị rõ ràng rằng tiểu bang phải chứa tất cả thông tin tôi cần khi điều hướng được thực hiện.

Đây là mã Tôi đang sử dụng:

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

Đáng tiếc là dữ liệu được truyền như trống:

{ 
    state:{} 
} 

HTML như sau:

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

---

Hy vọng rằng ai đó có thể giúp đỡ. Cảm ơn!

Answer 1

$.mobile.navigate và navigatesự kiện, được sử dụng để theo dõi lịch sử URL và truyền/lấy dữ liệu từ URL. Chúng hoạt động với điều hướng của trình duyệt (quay lại/chuyển tiếp).

Để chuyển dữ liệu giữa các trang động trong ứng dụng web bằng cách sử dụng điều hướng nội bộ, hãy sử dụng $.mobile.changePage.

Resources:

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

Sử dụng mã dưới đây để vượt qua dữ liệu từ trang này sang khác.

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

Để lấy dữ liệu

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

Answer 2

Tôi biết đó là một câu hỏi cũ, nhưng câu trả lời @ Omar có thể được cải thiện.

Trong thực tế, nó có thể sử dụng pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition và pagecontainerchange (họ đang bắn theo thứ tự này) và bên trong xử lý bạn có thể đọc tài sản history.state, mà tại thời điểm đó được cập nhật với các trạng thái mới.

Vì vậy, ví dụ, bạn có thể viết (để khởi tạo những điều mà cần trang đã được định dạng, ví dụ như Google Maps):

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

này hoạt động trong mọi trường hợp: nếu bạn click vào một liên kết (với một băm, ví dụ: #user), nếu bạn điều hướng bằng các nút quay lại và tiến lên, nếu bạn sử dụng $.mobile.navigate và cũng cho window.history.back().

Hơn nữa, bạn có thể chuyển dữ liệu phức tạp, không giới hạn đối với các ràng buộc chuỗi truy vấn.

Resources:

• Pagecontainer
• History