2013-04-02 47 views
5

我正在使用$.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> 

希望有人能幫忙。謝謝!

+0

'state'。 – Omar

+0

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

+0

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

回答

3

$.mobile.navigatenavigate事件用於跟蹤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); 
}); 
+0

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

+0

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

+0

,但這不適用於瀏覽器導航(即按下後退/前進按鈕) – Kzar

1

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

事實上,它可以使用pagecontainerbeforehidepagecontainerbeforeshowpagecontainerhidepagecontainershowpagecontainertransitionpagecontainerchange(他們在這個順序觸發)和處理器中,你可以讀取屬性history.state,在那個點與更新新的狀態。

因此,舉例來說,你可以寫(初始化的事情,需要的頁面已經被格式化,如谷歌地圖):

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

這適用於所有情況:如果你點擊一個鏈接(用散列,例如#user),如果使用後退和前進按鈕導航,則使用$.mobile.navigate,也可使用window.history.back()

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

資源:使用瀏覽器導航按鈕(前進/後退)時,將創建