我正在动态使用 data-role="list-divider"
在 ListView 中显示类别数据。与 list-divider
一起,我显示了 ListView 中每个项目的描述。但这些描述来自于每个项目的相关文件。当我显示带有 list-divider
的 ListView 以及说明时,我遇到了问题,然后 ListView 显示为所有分隔符应首先组合,并在显示说明的列表项下方。如何正确显示 ListView 并附有说明。
$("#list").append('<li data-role="list-divider">' + section + '</li>');
$(this).children().each(function () {
var content = $(this).text();
var order = $(this).attr("order");
var seq = order + '' + $(this).attr('order');
var file = $(this).attr('file');
$.mobile.activePage.append('<div id="files" style="display: none"></div>');
$('#files').load(file, function (data) {
var txt = $(data).find('p').text();
$("#list").append('<li><a href="" class="style1" data-sequence="s' + seq + '" file="' + file + '"><h2>' + content + ' </h2><p class="description">' + txt + '</p></a></li>');
$("#list").listview('refresh');
});
});
提前致谢。
最佳答案
$('#files').load(file, function (data)
是问题所在。这是一个异步函数,这意味着它不会阻塞。因此,在 load() 调用添加内容的函数之前添加这些部分。
使用ajax和async:false加载数据,然后列表正确显示。
[编辑1]
展示了一些使异步调用同步的工作。它使用了绑定(bind)函数,这可能不适用于所有平台( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind )
...您还可以更改超时函数的延迟,因为 50ms 是一个非常短的间隔,这会导致更高的负载...
[编辑2]
为没有绑定(bind)功能的浏览器添加绑定(bind)功能,如上面文章链接所述:
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
[编辑3]
进一步改进了代码片段,无需绑定(bind)功能即可工作。
关于jquery - 如何在listview中使用jquery动态显示列表分隔线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18180712/