2017-04-24 50 views
0

比方說,我有我的項目的更多或更少的這些文件:如何使用Pagecontainer Widget將對象發送到另一個不同的頁面?

  • 將pageA.html
  • PageA.js
  • PageB.html
  • PageB.js

我會喜歡將PageA.html頁面更改爲PageB.html。然後,我用Pagecontainer Widget。這裏是我的PageA.js代碼段更改頁面:

$(":mobile-pagecontainer").pagecontainer("change", "WorkOrderDetail.aspx", 
{ 
    transition: "slide", 
    objectA: objA 
}) 

在此基礎上article,在另一邊(PageB.js),我可以得到objectA通過pagebeforechange事件,如:

$(document).on("pagebeforechange" , function (event, data) { 
     var stuff = data.options.objectA; 
     console.log(JSON.stringify(stuff)); 
}); 

不幸的是,當我嘗試它時,它甚至不會觸發pagebeforechange事件,當我使用Pagecontainer Widget將PageA.html頁面移動到PageB.html時。當我直接從瀏覽器刷新pageB.html時,它只會觸發事件。

因此,

  • 是有可能通過與Pagecontainer的widget兩個不同頁之間對象?
  • 如果是,有沒有我錯過的概念?
  • 如果不是,是否有任何正確的方式來傳遞它,同時仍然使用Pagecontainer Widget的過渡效果?
+1

這裏是外部頁面的頁面JQM事件的順藤摸瓜:jQuery Mobile的「頁面」活動 - 額外](https://jqmtricks.wordpress.com/2014/05/23/jQuery的移動頁面事件-EXTRA /) – deblocker

回答

1

你提到的文章是舊的,討論多頁模型,在您使用單頁模型。在MPM和SPM中操作頁面的技術有所不同。

pagecontainer小部件是在jQM 1.4中引入的;它很方便,但需要更多的編碼和試用&錯誤過程。請注意,pagebeforechange已折舊,並替換爲pagecontainerbeforechange。此外,該事件觸發兩次,並返回幾乎相同的數據,如下所示:

  1. 第一次返回.toPage值作爲字符串
  2. 第二時間.toPage是一個對象

在光以上,您必須根據要檢索的數據以及是否要對上一頁或下一頁進行更改來決定何時運行代碼。

在jQM中的頁面之間傳輸和檢索數據有很多種方法。例如,數據可以在JQM pagecontainer事件,query string,本地存儲...等

在你的情況傳遞,你想改變頁面時傳遞一個對象

$.mobile.pageContainer.pagecontainer("change", "pageB.html", { objectA: objA }); 

由於pagecontainerbeforechange是在每一頁變化被炒了,你必須添加一些條件,以防止你的代碼,只要在事件被觸發運行。此外,要確定發出的數據是string還是object

$(document).on("pagecontainerbeforechange" , function(e, data) { 
    if (typeof data.toPage === "object" && 
    data.options.target === "pageB.html" && 
    data.options.objectA !== "") { 

    var objectA = data.options.objectA, /* object passed */ 
     targetPage = data.toPage;  /* page you navigated to (jQuery object) */ 

    targetPage.find(".foo").text("objectA.bar"); 

    } 
}); 

將數據對象和導航到的頁面對象都設置好之後,就可以進行所需的更改。

Demo

相關問題