Question

我目前正在尝试使用jquerymobile + phonegap应用。我的问题集中在jquerymobile框架上。

我想更改为动态（通过jsonp）加载了slidefade过渡的页面，我希望在转换中看到加载的内容。目前正在进行转换，之后会显示内容。（因为我正在使用pagebeforeshow事件将数据添加到dom中。）

我在触发changePage事件之前通过jsonp加载了内容。所以我的数据已经存在。现在我需要在执行转换之前将数据放在dom中。我试图在jqm的changePage函数中找到正确的位置来触发事件并在转换之前触发它。但内容未在转换中显示。

这就是我如何加载我的列表（工作正常）

function getList() {
    $.mobile.loading( 'show');
    var req = $.ajax({
    url : serviceURL + 'canteenParser2.php?type=getAllCanteens&callback=?',
    dataType : "jsonp",
    async : false,
    cache: false,
    timeout : 10000
});

req.success(function(data) {
    globalAjaxData = data;
    $.mobile.changePage('mensa.html',{showLoadMsg: false,
                         transition: 'slidefade'}
    );

});

req.error(function() {
    alert('Oh noes!');
});
}

这就是我如何显示数据：

function showList()
{
mensaList = globalAjaxData;
$.each(mensaList, function(index, mensa) {
    $('#mensaList').append('<li><a href="mensadetails.html?id=' + mensa.id + '" data-transition="slidefade">' +
                '' + mensa.name +  '</a></li>');
    });
$('#mensaList').listview('refresh');

}

我正在使用：

调用showList（）方法

$('#mensaListPage').live('pageshow',function(event){
    showList();
});

正如我所提到的，我尝试过例如pageload事件和pagebeforeshow事件。有没有人建议如何实现所期望的行为？

问候 Moritz的

更新

我发现在转换之前我需要在ajax加载调用之后调用showList Methode：

$$('#mensaListPage').live('pagebeforeshow',function(event){
showList();
});

这适用于幻灯片转换，但不适用于幻灯片转换。（但幻灯片转换最终会在我的移动应用程序中闪烁。因此我使用了幻灯片。）

希望有机会解决其中一个问题。 ;）

Answer 1

jsonp个请求不支持同步操作，

在第二页加载你的数据。它会运作良好。

JQuery Mobile - 在转换之前动态加载页面

1 个答案: