Question

我正在使用jQuery mobile的listview。列表视图是动态加载的（Ajax函数调用自身直到所有内容都被加载或者直到用户点击停止）。对于每个Ajax调用，都会添加100个项目。

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

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

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

我猜这个指令会处理listview的每个项目，但我只需要刷新新项目。那么是否可以仅刷新最后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元素并附加每个元素，您可以创建所有100个并立即附加它们。

其次，为了避免刷新，您可以在添加时直接将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

jQuery mobile listview只刷新一些项目

1 个答案: