jQuery Mobile：获取通过changePage传递给页面的数据 [英] jQuery Mobile: Get data passed to page via changePage

问题描述

  
 
我试图将一个对象从一个页面传递到另一个页面，并且符合JQM文档， $ .mobile.changePage（about / us.html，{data：{paramUno：Uno，paramDos：11}}）; 
  

我的问题是，我不确定访问这些值的最佳方式。已加载。我为 pageshow ， pagebeforeshow ， pageinit添加了页面事件回调 ， pagechange ，并且在任何情况下，event.data都是 undefined 。什么是正确的方法来做到这一点？

谢谢！

解决方案

解决方案

发送给他们：

<$ p $ mobile.changePage（'page2.html'，{dataUrl：page2.html？parameter = 123，data：{'paremeter'：'123'}，reloadPage：true，changeHash ：true}）;

然后读取它们：

<$ p $（＃index）。live（'pagebeforeshow'，function（event，data）{
var parameter = $（this）.data（url）。split （？）[1] ;;
parameter = parameters.replace（parameter =，）;
alert（parameter）;
}）;

更多示例可以在这里找到： jQuery Mobile：文档就绪与页面事件 ，请查看以下章节：页面转换之间的数据/参数操作。

示例：

index.html

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =widdiv = device-widdiv，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
< meta name =apple-mobile-web-app-capablecontent =yes/> 
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/> 
< title> 
< / title> 
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/> 
< script src =http://www.dragan-gaic.info/js/jquery-1.8.2.min.js> 
< / script> 
< script src =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< / script> 
< script> 
 $（document）.on（'pagebeforeshow'，#index，function（）{
 $（document）.on（'click'，#changePage，function（）{
 $ .mobile.changePage（'second.html'，{dataUrl：second.html？paremeter = 123，data：{'paremeter'：'123'}，reloadPage：false，changeHash：true}）; 
}）; 
}）; 
 $ b $（document）.on（'pagebeforeshow'，#second，function（）{
 var parameter = $（this）.data（url）。split（ ？）[1] ;; 
 parameter = parameters.replace（parameter =，）; 
 alert（parameter）; 
}）; 
< / script> 
< / head> 
< body> 
<！ - 首页 - > 
< div data-role =pageid =index> 
< div data-role =header> 
< h3> 
第一页
< / h3> 
< / div> 
< div data-role =content> 
< a data-role =buttonid =changePage>测试< / a> 
< / div> <！ - 内容 - > 
< / div><！ -  page  - > 
 
< / body> 
< / html> 
  

second.html

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =widdiv = device-widdiv，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
< meta name =apple-mobile-web-app-capablecontent =yes/> 
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/> 
< title> 
< / title> 
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/> 
< script src =http://www.dragan-gaic.info/js/jquery-1.8.2.min.js> 
< / script> 
< script src =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< / script> 
< / head> 
< body> 
<！ - 首页 - > 
< div data-role =pageid =second> 
< div data-role =header> 
< h3> 
第二页
< / h3> 
< / div> 
< div data-role =content> 
 
< / div> <！ - 内容 - > 
< / div><！ -  page  - > 
 
< / body> 
< / html> 
  

更多信息

如果您想要了解有关此主题的更多信息，请查看此 文章 即可。你会发现几个解决方案的例子。

I'm trying to pass an object from one page to another and accoriding the JQM docs this should be correct:

$.mobile.changePage( "about/us.html", { data: {paramUno:"Uno", paramDos:11} });

My problem is that I'm not sure of the best way to access those values once us.html has loaded. I added page event callbacks for pageshow, pagebeforeshow, pageinit, and pagechange and in every case, event.data is undefined. Whats the proper way to do this? I'd prefer to not use localStorage or a global/namespaced var unless that's my only choice.

Thank you!

解决方案

Solution

Send them like this:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

And read them like this:

$("#index").live('pagebeforeshow', function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);    
});

More examples can be found here: jQuery Mobile: document ready vs page events, just look for chapter: Data/Parameters manipulation between page transitions.

Example:

index.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {     
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            }); 
        }); 

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");  
            alert(parameter);
        });         
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Test</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

second.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

这篇关于jQuery Mobile：获取通过changePage传递给页面的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！