如何在listview中動態使用jquery顯示列表分隔符？

我動態使用data-role="list-divider"來顯示列表視圖中的分類數據。與list-divider一起，我正在顯示關於listview中每個項目的描述。但是這些描述來自每個項目的相關文件。當我用list-divider顯示列表視圖時，我遇到了問題以及描述，然後列表視圖顯示，因爲所有分隔符應該先合併，然後在帶有描述的列表項下方顯示。如何正確顯示listview和描述。如何在listview中動態使用jquery顯示列表分隔符？

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'); 
    }); 
});

在此先感謝。

來源

2013-08-12 Lucky

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

是問題所在。這是一個異步函數，這意味着它不會阻塞。因此這些部分在load（）調用添加內容的函數之前添加。

使用ajax with async：false加載數據，然後列表被正確顯示。

[EDIT 1]

http://jsfiddle.net/uECUY/

示出了使asyncronous一些工作調用同步。它使用綁定功能，它可能不適用於所有平臺（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind）

...您可能也會更改超時功能的延遲，因爲50ms是相當短的時間間隔，這會導致更高的負載。 ..

[EDIT 2]

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; 
    }; 
}

[EDIT 3]

進一步改善的片斷，沒有bind函數工作。

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

來源

2013-09-05 07:30:48

我在這裏加載數據「#files」 ..但在這裏我不得不提的AJAX這個「#files」。 – Lucky

在這裏，我做了一些工作爲你同步它：http://jsfiddle.net/uECUY/ –

如果您使用$ .ajax（）與async：false，您需要手動添加數據到「＃文件」。例如$（「＃files」）。append（）; –

如何在listview中動態使用jquery顯示列表分隔符？

回答

相關問題