jQuery mobile listview只刷新一些项目

Question

我正在使用带有 jQ​​uery 移动的列表视图。列表视图是动态加载的（Ajax 函数会调用自身，直到所有内容都加载完毕或用户单击停止）。对于每个 Ajax 调用，添加 100 个项目。

我拥有的项目越多，添加新项目所需的时间就越多（这不是来自服务器）。罪魁祸首似乎是这条指令：

 $("#ListDspQry").listview("refresh");

如果我删除它一切都很好。

我猜该指令处理列表视图的每个项目，但我只需要刷新新项目。那么是否可以只刷新最后 100 个项目？

代码如下：

//....
for (var i = this.nbDisplayed; i < this.nbRecords; i++) {
  addItem(this, i);
}
$("#ListDspQry").listview("refresh");
//....

function addItem(oSvdQuery, index) {
  var oLi = document.createElement('li');
  var oAnchor = document.createElement('a');
  var link = "javascript:showDetails(' + (index) + ')";
  oAnchor.setAttribute('href',link);
  var html='';
  var oRecord = [];
  for (i = 0; i < oSvdQuery.fields.length; i++) {
    oField = oSvdQuery.fields[i];
    oRecord = oSvdQuery.allValues[index];
    html = html + oField.name + ' : ' + oRecord[oField.name] + '<br>';
  }
  oAnchor.innerHTML = html;
  var listDspQry = document.getElementById('ListDspQry');
  listDspQry.appendChild(oLi);
  oLi.appendChild(oAnchor);
  oSvdQuery.nbDisplayed++;
}

Answer 1

您可以采取一些措施来优化代码并避免出现 listview('refresh')。

首先，添加记录时，不是一次创建一个dom元素并附加一个，而是一次创建所有一百个并附加它们。

其次，为避免刷新，您可以在添加时直接将 jQM 类添加到元素中。

对于我的示例，我一次添加 1000 条记录。在for 循环中，我将新项目连接到字符串allItems，然后在for 循环之后，我将它们全部附加一次。在for 循环内，我将class="ui-btn ui-btn-icon-right ui-icon-carat-r" 添加到<a> 标记中，以便应用jQM 样式：

var index = 0;
$(document).on("pagecreate", "#page1", function(){

    $("#btnAdd").on("click", function(){
        var allItems = '';
        for (var i = 0; i < 1000; i++) {
            allItems += '<li><a href="javascript:showDetails(' + i + ')" class="ui-btn ui-btn-icon-right ui-icon-carat-r">item number ' + (index + i) + '</a></li>';
        }

        index += 1000;
        $("#ListDspQry").append(allItems);
    });   
});

这是一个DEMO

更新：为了将listview("refresh") 仅应用于添加的列表项而不是现有项，我们可以在页面中创建一个隐藏的 UL：

<div style="display: none">
    <ul id="ListTemp" data-role="listview" ></ul>
</div>

然后在代码中，我们可以将新项目添加到隐藏UL，调用listview("refresh")，然后将它们分离并附加到可见UL：

$(document).on("pagecreate", "#page1", function(){
    $("#btnAdd").on("click", function(){
        var allItems = '';
        for (var i = 0; i < 100; i++) {
            allItems += '<li><a href="javascript:showDetails(' + (index + i) + ')" >item number ' + (index + i) + '</a></li>';
        }        
        index += 100;

        $("#ListTemp").empty().append(allItems).listview("refresh");

        var element = $("#ListTemp li").detach();
        $("#ListDspQry").append(element);
    });   
});

这是一个更新的DEMO