jQuery mobile listview仅刷新某些项

我正在使用jQuery mobile的listview。listview是动态加载的（Ajax函数会自动调用，直到加载所有内容或用户单击stop）。对于每个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++;
}

/。。。。
for（var i=this.nbdisplated；i'；
}
oAnchor.innerHTML=html；
var listDspQry=document.getElementById（'listDspQry'）；
附件儿童（oLi）；
奥利·阿佩奇尔德（奥恩科尔）；
nbdisplated++；
}

您可以做一些事情来优化代码并避免listview（“刷新”）

首先，在添加记录时，不必一次创建一个dom元素并追加每个元素，您可以创建所有一百个元素并一次追加它们

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

例如，我一次添加1000条记录。在

for

循环中，我将新项目连接到字符串

allItems

，然后在

for

循环之后，我将所有项目追加一次。在

for

循环中，我将

class=“ui-btn ui-btn-icon right ui-icon-carat-r”

添加到

”；
}        
指数+=100；
$（“#ListTemp”）.empty（）.append（allItems）.listview（“刷新”）；
var元素=$（“#listemp li”）.detach（）；
$（“#listdspkry”）.append（元素）；
});   
});

以下是更新的

---

你好当然，它是可行的，但我不太喜欢这种解决方案。首先，我要编写的html比这个多得多，如果在jquerymobile的未来版本中，类的名称发生变化，我必须改变这一部分。如果我更改listview的外观（类）也是一样。我必须编写的真正html是：

我不相信你能应用listview(“刷新”）对于复杂的文本，你可以使用一个模板插件，比如mustache或doT.js。此外，你还可以在列表上实现分页，这样一次页面上的项目数量就不会超过实际数量。最后，你可以使用你自己的CSS样式的表、网格或列表，而不是标准的listview小部件……我已经刚刚测试了你的演示。效果很好。也许我会用这个方法。thanks@Arsnow，请参阅我的更新答案。您可以使用listview（“刷新”），方法是将新项目添加到隐藏的UL，调用刷新，然后将项目移动到可见的UL。这样您就不需要手动添加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);
    });   
});

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

$(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);
    });   
});