JQuery Mobile - 动态计数泡泡

我正在创建一个具有listview的JQuery Mobile应用程序。我正在使用Web服务的结果填充该列表视图。正因为如此，在列表视图中的项目被填充如下所示：JQuery Mobile - 动态计数泡泡

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

我的列表视图被正确填充。计数泡泡的值正在显示。但是，UI不会渲染泡泡。有没有办法在列表视图中动态构建一个包含计数泡泡的结果集？如果是这样，怎么样？

谢谢！

来源

2012-03-18 JavaScript Developer

你的方式应该工作。我能想到的唯一的事情就是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'); 
    }); 
});

来源

2012-03-19 18:46:31 Kiliman

+1由我引起你的榜样工作，但我认真建议不要链接的'追加（）'方法与你的例子新的jQuery对象。它更有效地构建一个HTML字符串，然后调用'append'一次。 – shanabus 2012-03-20 01:20:56

我通常使用模板来生成HTML。对于我只是想确保正确的HTML创建的示例。 – Kiliman 2012-03-20 01:30:20

@shanabus我认为以这种方式使用append是完全合理的。在除了最受欢迎的网站之外的所有网站中，这一点点javascript不会影响用户感知的性能，也不会影响服务器的操作人员。在这种情况下，可读性比替代字符串连接更好。 – CodeMonkeyKing 2012-08-20 17:22:18

JQuery Mobile - 动态计数泡泡

回答

相关问题