2013-04-04 67 views
3

我在jquery移動應用程序中向後移動歷史堆棧時遇到了問題。JQuery Mobile:在動態頁面生成中使用'data-rel =「back」'

從本質上講,我有三個頁面:

  1. 搜索表單(預建的分度,頁面作用有限導航:只有結果列表頁)
  2. 結果列表(預建DIV與頁面的作用,導致信息添加通過AJAX,導航可以任意記錄頁)
  3. 記錄頁面(動態完全建立。無限航的可能性,相關的記錄頁)

記錄頁面每次選擇新記錄時,都會基於表格和record_id動態創建,並附加到文檔正文。

var page_id = table + record_id; 
var pg_html = newPageHTML(page_id); 
$('body').append(pg_html); 
$.mobile.changePage($("#" + page_id)); 

推進到一個記錄,按「返回」按鈕後(數據相對=「後面」),預期行爲將返回到前一頁,是它的另一個記錄或搜索結果列表,但我一直髮回搜索表單。這發生在我使用data-dom-cache =「true」的時候,當我沒有。

任何解釋爲什麼這會是?謝謝您的幫助。

回答

2

獲取DOM中上一頁的ID然後移動到它。

Working Demo

$('.selector').on('click', function() { 

// get the ID of the previous page 
var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id; 

// move to previous page with reverse effect 
$.mobile.changePage(previous, { 
    transition: 'slide', 
    reverse: true 
}); 
}); 
+1

啊,感謝奧馬爾。在過去的一個小時左右,我一直在研究它,並在下面提出了一個令人費解的解決方案。我非常感謝你的回答。我希望我可以測試和實現它,但是我對代碼做了很多修改,甚至無法恢復到原來的問題。感謝這個例子和幫助。它看起來像一個偉大的,簡單的,易於實施的解決方案。 – dgig 2013-04-04 21:47:37

+0

@ user399696它看起來你有一個解決方法:)祝你好運! – Omar 2013-04-04 21:52:16

2

好了,好了,這裏是我如何固定它。雖然我不會選擇這個答案作爲答案,因爲它遠離我想要它的工作方式,並且似乎非常複雜。

的問題:

  1. 無法保存任何頁面更改的歷史,沒有指向一個真實的.html頁面。所以在動態頁面之間彈跳出來了。
  2. 我需要一種方法將我的數據傳遞給留在歷史記錄中的.html頁面,因此我使用url中的序列化字符串(如GET字符串)。類似於這裏,但不同,更短,更乾淨,我找不到鏈接 - 對不起! (How can I get query string values in JavaScript?
  3. .html頁面必須是不同的,並在彼此之間進行交換,以便頁面可以重新加載並觸發頁面更改事件偵聽器。

現在,html頁面被存儲並且具有在點擊時重繪自己所需的所有信息。 #2(不是我的,十分感謝誰寫的)

代碼:對#3

$.urlParam = function(name){ 
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
    return results[1] || 0; 
} 

代碼:

// change page 
if($('.ui-page-active').attr('id') == "record-a"){ 
    $.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id); 
}else if($('.ui-page-active').attr('id') == "record-b"){ 
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id); 
}else{ 
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id); 
} 
+0

檢查這個[回答](http://stackoverflow.com/questions/15765858/jquery-mobile-navigate-why-is-the-state-empty/15768060#15768060)在頁面之間傳遞參數。 – Omar 2013-04-04 22:02:07