1

我正在使用以下代码段：

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

4

1 回答 1

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. live在 v1.9 中被删除并on替换它。即使您使用旧版本，从on.

  • pagebeforeshow将您的活动更改为pageshow。由于某种原因，它不能以应有的方式在 1.2 上运行。并添加了一个pagehide清除 HTML 的方法，ul以便下次发生时不会看到它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/

于 2013-07-07T15:11:16.403 回答