2

data-role="list-divider"リストビューにカテゴリごとのデータを表示するために動的に使用しています。とともに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');
   });
});

前もって感謝します。

4

1 に答える 1

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

が問題です。これは非同期関数です。つまり、ブロックしません。したがって、コンテンツを追加する関数を load() が呼び出す前に、セクションが追加されます。

async:false で ajax を使用してデータをロードすると、リストが適切に表示されます。

[編集1]

http://jsfiddle.net/uECUY/

非同期呼び出しを同期させるためのいくつかの作業を示しています。それはすべてのプラットフォームで機能しない可能性がある bind 関数を使用するのは難しいです ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind )

...タイムアウト機能の遅延を変更することもできます.50ミリ秒は非常に短い間隔であり、負荷が高くなります...

[編集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/

于 2013-09-05T07:30:48.570 に答える