JQuery Mobile - Dynamic Count Bubbles

Question

Я создаю приложение JQuery Mobile, имеющее listview. Я заполняю этот список с результатами веб-службы. Из-за этого, элементы в списке в настоящее время заселены, как показано здесь:

$.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"); 

Мой ListView заселяется правильно. Отображается значение для пузырька счета. Однако пользовательский интерфейс не создает пузырь. Есть ли способ динамически построить набор результатов с пузырьками счета в виде списка? Если да, то как?

Спасибо!

Answer 1

Ваш путь должен работать. Единственное, о чем я могу думать, это то, что HTML недействителен.

В любом случае, я создал простую версию, чтобы показать, что это возможно. http://jsfiddle.net/kiliman/HDUqp/

В принципе, просто застроить HTML для <li/> и добавить в список, а затем вызвать .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'); 
    }); 
});