如何使用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 }) 

基于这篇文章 ，另一方面（PageB.js），我可以通过pagebeforechange事件得到objectA ，如：

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

不幸的是，当我尝试它时，当我使用Pagecontainer Widget将页面从PageA.html移动到PageB.html时，它甚至根本不会触发pagebeforechange事件。 它只会在我直接从浏览器刷新pageB.html时触发事件。

因此，

• 是否可以使用Pagecontainer Widget在两个不同页面之间传递对象？
• 如果是，是否有任何我错过的概念？
• 如果不是，是否有任何正确的方法来传递它仍然使用Pagecontainer Widget的过渡效果？

Answer 1

您提到的文章很旧并且讨论了多页模型 ，而您使用的是单页模型 。 在MPM和SPM中操作页面所遵循的技术有所不同。

pagecontainer小部件是在jQM 1.4中引入的; 它很方便，但需要更多的编码和试错过程。 请注意， pagebeforechange已折旧并替换为pagebeforechange 。 此外，此事件触发两次并返回几乎相同的数据，如下所示：

1. 第一次将.toPage值作为字符串返回
2. 第二次.toPage是一个对象

鉴于上述情况，您必须根据要检索的数据以及是否要对上一页或下一页进行更改来决定何时运行代码。

有许多方法可以在jQM中的页面之间传输和检索数据。 例如，数据可以在jQM pagecontainer事件， 查询字符串 ，本地存储…等内传递。

在您的情况下，您希望在更改页面时传递对象 。

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

一旦掌握了数据对象和导航到的页面对象，就可以进行所需的更改。

演示