Question

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

将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));
});

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

因此，

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

Answer 1

您提到的文章已经陈旧并讨论了多页模型，而您正在使用单页模型。在MPM和SPM中操作页面所遵循的技术存在差异。

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

首次将.toPage值作为字符串
第二次.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

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

1 个答案: