2017-04-24 82 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

相关问题