如何使用Pagecontainer Widget将对象发送到另一个不同的页面? [英] How to send object to another different page with Pagecontainer Widget?

问题描述

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

Let's say I have more or less these files in my project:

• PageA.html
• PageA.js
• PageB.html
• PageB.js

我想将页面从PageA.html更改为PageB.html.然后，我使用了 Pagecontainer窗口小部件.这是我在PageA.js中更改页面的代码段:

I would like to change the page from PageA.html to PageB.html. Then, I used Pagecontainer Widget. Here is my snippet code in PageA.js to change the page:

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

基于此文章，在另一端(PageB.js)，我可以通过pagebeforechange事件获得objectA，例如:

Based on this article, on the other side (PageB.js), I can get the objectA via pagebeforechange event like:

$( 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时，它才会触发事件.

Unfortunately, when I tried it, it even doesn't trigger pagebeforechange event at all when I move the page from PageA.html to PageB.html with Pagecontainer Widget. It only triggers the event when I refresh the pageB.html directly from the browser.

因此

• 是否可以使用Pagecontainer Widget在两个不同页面之间传递对象?
• 如果是，我有没有想念任何概念?
• 如果没有，是否有任何适当的方法可以通过它，同时仍使用Pagecontainer Widget的过渡效果?

推荐答案

在使用单页模型时，您提到的文章过时并讨论了多页模型. em>.在MPM和SPM中操作页面所遵循的技术有所不同.

The article you mentioned is old and discussed Multi-page model, while you are using Single-page model. There is a difference in the technique followed to manipulate pages in MPM and SPM.

pagecontainer窗口小部件是在jQM 1.4中引入的；它很方便，但是需要更多的编码和试用版.错误过程.请注意，pagebeforechange已贬值，并替换为pagecontainerbeforechange.此外，此事件会触发两次并返回几乎相同的数据，如下所示:

The pagecontainer widget was introduced in jQM 1.4; it is handy, yet requires more coding and trial & error process. Note that pagebeforechange is depreciated and replaced with pagecontainerbeforechange. Moreover, this event fires twice and returns almost the same data, as follows:

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

1. First time it returns .toPage value as a string
2. Second time .toPage is an object

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

In light of the above, you have to decide when to run your code, based on what data you want to retrieve and whether you want to do changes to previous or next page.

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

There are many ways to transfer and retrieve data between pages in jQM. For instance, data can be passed within jQM pagecontainer events, query string, local storage ... etc.

在您的情况下，您要在更改页面时传递 object .

In your case, you want to pass an object when changing pages.

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

由于每次页面更改都会触发pagecontainerbeforechange，因此您必须添加一些条件，以防止每次触发事件时代码都运行.另外，确定发出的数据是string还是object.

Since pagecontainerbeforechange is fired on every page change, you have to add some conditions in order to prevent your code from running whenever the event is fired. Also, to determine whether the data emitted is a 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" );

  }
});

一旦拥有数据对象和导航页面的对象，就进行所需的更改.

Once you have both, the object of data and the object of the page you have navigated to, do the changes you want.

演示

Demo

这篇关于如何使用Pagecontainer Widget将对象发送到另一个不同的页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！