Question

我动态使用data-role="list-divider"在listview中显示类别明智的数据。与list-divider一起，我将显示列表视图中每个项目的描述。但这些描述来自每个项目的相关文件。当我使用list-divider显示列表视图以及描述时，我遇到了问题，然后列表视图显示，因为所有分隔符应该首先和下面组合，列表中的项目将显示。如何正确显示列表视图和描述。

http://jsfiddle.net/yC8VS/2/

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

先谢谢。

Answer 1

$('#files').load(file, function (data)

是问题所在。这是一个异步函数，这意味着它不会阻塞。因此，在load（）调用添加内容的函数之前添加这些节。

使用带有async：false的ajax加载数据，然后正确显示列表。

[编辑1]

http://jsfiddle.net/uECUY/

显示了使异步调用同步的一些工作。很难使用绑定功能，这可能不适用于所有平台（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind）

...你也可以改变超时功能的延迟，因为50ms是一个非常短的间隔，这会导致更高的负载......

[编辑2]

绑定函数以添加没有绑定功能的浏览器，如上文文章链接：

中所述

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]

进一步改进了代码片段，无需绑定功能即可工作。

http://jsfiddle.net/uECUY/4/

如何使用listview中的jquery动态显示列表分隔符？

1 个答案: