Question

我有点新鲜处理json纯粹使用jquery和html（用于使用django / python）

如何以最优雅/最干净的方式添加像这样的复杂html块？

               $.getJSON(url,function(data){
                 $.each(data, function(i, object){

                   $("#campaign_table tbody").append(
                       '<tr class="toggle">' +
                           '    <td>' + object.firstImpression + '</td>'  +
                           '    <td class="text-left">' + object.name + '</td>'  +
                           '    <td>' + object.impressions + '</td>'  +
                           '    <td>' + object.clicks + '</td>'  +
                           '    <td>' + object.clickRate + '</td>'  +
                           '    <td>' + object.sales + '</td>'  +
                           '    <td>' + object.salesRate + '</td>'  +
                         '</tr>'  +
                           '<tr class="tablesorter-childRow ">' +
                            '    <td></td>'  +
                            '    <td class="text-left"> Non targeted </td>'  +
                            '    <td>' + object.nonTargeted.impressions + '</td>'  +
                            '    <td>' + object.nonTargeted.clicks + '</td>'  +
                            '    <td>' + object.nonTargeted.clickRate + '</td>'  +
                            '    <td>' + object.nonTargeted.sales + '</td>'  +
                            '    <td>' + object.nonTargeted.salesRate + '</td>'  +
                          '</tr>'  +
                           '<tr class="tablesorter-childRow ">' +
                              '    <td></td>'  +
                              '    <td class="text-left"> Non targeted </td>'  +
                              '    <td>' + object.targeted.impressions + '</td>'  +
                              '    <td>' + object.targeted.clicks + '</td>'  +
                              '    <td>' + object.targeted.clickRate + '</td>'  +
                              '    <td>' + object.targeted.sales + '</td>'  +
                              '    <td>' + object.targeted.salesRate + '</td>'  +
                            '</tr>'
                   );

                 });
               });

Answer 1

你拥有的东西当然是可行的，但是你可能想要一个循环在指定对象上的单独函数（例如，你可以用于object，object.nonTargeted和object.targeted的一个函数）

在这种情况下，您可能喜欢的一个概念是JavaScript客户端模板。例如，使用Handlebars.js，您可以拥有一个类似于html的模板：

<tr>
    <td>{{firstImpression}}</td>
    <!-- other cells -->
</tr>

和JS：

$("#table").append(Handlebars.compile($("#template").html())(object));

http://jsfiddle.net/5W4bx/

如何将复杂的html块附加到for循环

1 个答案: