jQuery Mobile導航 - 爲什麼狀態爲空？

我正在使用$.mobile.navigate("#test-page", {id:123})導航到輔助頁面。jQuery Mobile導航 - 爲什麼狀態爲空？

從頁面到頁面的導航工作正常....但狀態爲空！

該文檔清楚地表明，狀態應包含執行導航時所需的所有信息。

這是我使用的代碼：

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

不幸的是數據作爲空傳遞：

{ 
    state:{} 
}

的HTML如下：

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

希望有人能幫忙。謝謝！

來源

2013-04-02 RadiantHex

'state'。 – Omar

當我移動到'＃test-page'時，state：Object hash：「＃test-page」url：「file：/// C：/Users/Omar/Desktop/experiements/navigation.html#test-page」」。 – Omar

@Omar謝謝！我會嘗試改變一些事情來弄清楚什麼是錯誤的...依賴關係離開CDN。 – RadiantHex

$.mobile.navigate和navigate事件用於跟蹤URL歷史記錄並從URL傳遞/獲取數據。他們使用瀏覽器的導航（後退/前進）。

要使用內部導航在webapp中動態地在頁面之間傳遞數據，請使用$.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); 
});

來源

2013-04-02 15:27:56 Omar

數據和數據url必須匹配嗎？ – JonWells

@CrimsonChin'dataUrl'來更新瀏覽器位置，'data'用於發送數據到'ajax'函數。你的情況，從'dataUrl'獲取數據。 – Omar

，但這不適用於瀏覽器導航（即按下後退/前進按鈕） – Kzar

我知道這是一個老問題，但@奧馬爾的回答可以得到改善。

事實上，它可以使用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()。

此外，您可以傳遞複雜數據，而不限於查詢字符串約束。

資源：使用瀏覽器導航按鈕（前進/後退）時，將創建

來源

2016-02-07 22:31:12 Kzar

jQuery Mobile導航 - 爲什麼狀態爲空？

回答

相關問題