JQuery Mobile - 在动态生成的页面之间传递变量

时间:2015-01-25 17:05:32

标签: javascript jquery variables jquery-mobile dynamic

我想我应该感到高兴,因为JQuery-Mobile一般很棒,但我仍然无法想象为什么JQueryMobile不会有本地传递变量的方式。

无论如何,我正试图传递一些变量来创建动态创建的“页面”上的自定义内容。

页面动态创建得很好。但是我现在还没能通过一个变量并且已经尝试了几天。

任何帮助都会很棒。

对于传递变量的最新尝试,我正在尝试CameronAskew's $.mobile.paramsHandler.addPage code,它开箱即用。

除了通用的jquery-mobile起点之外,I Started With This Script非常适合动态制作页面,如下所示:

// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);

// Move to this page by ID '#page'
$.mobile.changePage('#page');

这是完整的javascript:

run();
setInterval(function(){    
    run();
},5000);

function run() {
    var output;
    $.ajax({
        url: "http://[url_here]/mobile_get_data_2.php",
        success: function( data ) {
            var obj = jQuery.parseJSON( data );
            var output='';
            var charts='';
            var idx=1;          
            $.each(obj,function(k,v){
                output += '<ul data-role="listview" data-count-theme="a" data-inset="true">';
                output += '<a data-count-theme="a" href="#chart?param1=212121&param2=32327"><li>[returned description here]';
                output += '<span class="ui-li-count">';
                output += [returned count here];
                output += '</span></a></li>';
                output += '</ul>';
                idx = (idx+1);
            });
            $('#sensors').html(output).trigger("create");
        }
    });
}

$('#sensors').on('click', function ( e) {
    // Prepare your page structure
    var newPage = $(
        "<div data-role='page' id='page'>"
        + "<div data-role=header>"
        + "<a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>"
        + "<h1>Chart</h1>"
        + "</div>"
        + "<div data-role=content>Chart Here</div>"
        + "</div>"
    );
   newPage.appendTo($.mobile.pageContainer); // Append the new page into pageContainer

    // Move to this page by ID '#page'
     $.mobile.changePage('#page');     
});

// CameronAskew
$(function () {
    $.mobile.paramsHandler.addPage(
        "page",                      // jquery mobile page id which will accept parameters
        ["param1", "param2"],       // required parameters for that page
        [],                          // optional parameters for that page,
        function (urlVars) {
            // $("#param1display").html(urlVars.param1);
            // $("#param2display").html(urlVars.param2);
            alert( urlVars.param1);
        }
    );

    $.mobile.paramsHandler.init();
});

HTML:

<div data-role="page" id="summary">
<div data-role="header"><h1>MakerSpace</h1></div>
<ul id="sensors" data-role="listview" data-count-theme="c" data-inset="true"></ul></div>
<div data-role="footer"></div>
</div>

1 个答案:

答案 0 :(得分:0)

星星对齐了!

更改了此

$('#sensors').on('click', function ( e) {

到这个

$('ul').on('click', function () {

将变量放入(显然)

output += '<a data-count-theme="a" href="#chart?param1=[returned id]"><li>[returned description]';

现在它有效。

我希望这可以帮助那些人...