Question

我正在使用以下代码段：

function fetchContent()
{
    //do something
    $.mobile.changePage("#toTheTargetPage");
}

$("#toTheTargetPage").live('pagebeforeshow', function() {    
    $.mobile.showPageLoadingMsg("a", "Please wait", false); 
    renderTheContent();  
    $.mobile.hidePageLoadingMsg();
});

function renderTheContent()
{
    //populate dynamic list view using the content
}

但它没有显示装载机。并且它也没有在第一次加载时显示列表视图。如果我返回并再次返回，则仅显示内容。

我哪里错了？

注意：使用jquery Mobile 1.2.0

Answer 1

您的代码遇到的一些问题：

在each方法中，您在每一行后都刷新了listview。不建议。我改变了这一点，使each将HTML推送到一个数组中，你可以将其推入listview。

var li = [];
$.each(doctors, function (obj, doctor) {
    //console.log(doctor.DoctorRating);
    ratingHtml = populateRatingDiv(doctor.DoctorRating);
    //console.log(obj);
    li.push("<li data-role='list-divider'>" + toTitleCase(doctor.DoctorName) + "<div class='ratings'>" + ratingHtml + "</div></li>" + "<li data-icon='false'><a data-doc=" + obj + " onclick='showDocDetails(this);'><img src='images/doctor.png' style='margin-top:5%'/><div><h3>" + doctor.DoctorSpecialisation + "</h3><p><strong>Phone : " + doctor.DoctorPhone + "</strong></p><p>" + doctor.DoctorAddress + "</p></div></a></li>");
});
$("#doctorListView").append(li);

删除了所有live方法并将其转换为on。在v1.9中删除了live，on替换了它。即使您使用旧版本，也可以从on中受益。
将您的pagebeforeshow活动更改为pageshow。由于某些原因，它不按照应有的方式工作。并添加了pagehide方法，该方法将清除ul的HTML，以便下次pageshow发生时不会看到它。
```
$(document).on({
 'pageshow': function (e) {
    populateDoctorList();
  },
  'pagehide': function () {
    $(this).find("ul").html("");
  }
}, "#doctorList");
```
移动loading节目并将方法隐藏到populateDoctorList。对于您当前正在执行的操作和加载方法，上下文必须相同。否则它不会工作。
```
function populateDoctorList() {
  $.mobile.showPageLoadingMsg("a", "Please wait", false);
  //rest if your code 
}
```
要隐藏loading，您必须等到列表视图可以使用。因此，向promise()添加了append，然后调用了加载的隐藏。 promise确保所有内容都已完成，因此在此处应用loading("hide")是有道理的。
```
$ul.append(li).promise().done(function () {
    $(this).attr("data-role", "listview").listview().listview("refresh");
    $.mobile.hidePageLoadingMsg();
});
```
原型 - http://jsfiddle.net/hungerpain/kgWym/

在Jquery Mobile中填充动态内容时显示加载程序

1 个答案: