如何使用 Pagecontainer Widget 将对象发送到另一个不同的页面？

假设我的项目中或多或少有这些文件：

• A页.html
• PageA.js
• 页面.html
• PageB.js

我想将页面从 PageS.html 更改为 Page.html。然后，我用了页面容器小部件 https://api.jquerymobile.com/pagecontainer/。这是我在 PageA.js 中更改页面的代码片段：

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

基于此article https://jqmtricks.wordpress.com/2014/01/22/passing-parameters-between-pages-multi-page-model/，在另一边（Page.js），我可以得到objectA via pagebeforechange事件如：

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

不幸的是，当我尝试它时，它甚至没有触发pagebeforechange当我使用 Pagecontainer Widget 将页面从 PageA.html 移动到 Page.html 时，根本没有发生事件。仅当我直接从浏览器刷新 page.html 时，它才会触发该事件。

所以，

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

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

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

1. 第一次回归.toPage字符串形式的值
2. 第二次.toPage是一个对象

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

在 jQM 的页面之间传输和检索数据的方法有很多。例如，数据可以在 jQM pagecontainer 事件中传递，请求参数 https://stackoverflow.com/a/26393037/1771795、本地存储...等

就您而言，您想通过object更改页面时。

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

Since pagecontainerbeforechange每次页面更改时都会触发，您必须添加一些条件以防止代码在事件触发时运行。另外，还要确定发出的数据是否是string or an 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 http://plnkr.co/edit/1dpn0nAb4NLeB7wZueFJ