JQuery Mobile - Dynamic Count Bubbles

Question

Je crée une application JQuery Mobile dotée d'une vue liste. Je remplis cette listview avec les résultats d'un service Web. De ce fait, les éléments de la vue de la liste sont remplis comme indiqué ici:

$.each(results, function (i, result) { 
    var s = "<li><h2 style='padding-left:40px;'>" + result.title + "</h2><p style='padding-left:40px;'>"; 
    s += result.subTitle; 
    s += "</p><span class='ul-li-count'>" + result.count + "</span></li>"; 

    $("#resultListView").append(s); 
}); 
$("#resultListView").listview("refresh"); 

Mon listview est correctement renseigné. La valeur de la bulle de nombre est visible. Cependant, l'interface utilisateur ne rend pas la bulle. Existe-t-il un moyen de générer dynamiquement un ensemble de résultats avec des bulles de nombre dans une vue de liste? Si c'est le cas, comment?

Merci!

Answer 1

Votre chemin devrait fonctionner. La seule chose que je peux penser est que le HTML n'est pas valide.

Quoi qu'il en soit, j'ai créé une version simple pour montrer que c'est possible. http://jsfiddle.net/kiliman/HDUqp/

Fondamentalement, tout simplement construire le code HTML pour <li/> et ajouter à la liste, puis appelez .listview('refresh')

$('#page1').bind('pageinit', function(e, data) { 
    var n = 0; 
    $('#addResult').click(function(e) { 
     var $list = $('#resultListView'); 

     n++; 
     $('<li/>') 
      .append($('<h2>', { text: 'Title ' + n })) 
      .append($('<p>', { text: 'SubTitle ' + n })) 
      .append($('<span />', { text: n, class: 'ui-li-count'})) 
      .appendTo($list); 
     $list.listview('refresh'); 
    }); 
});