2

我对纯粹使用 jquery 和 html 处理 json 有点新（曾经与 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>'
                   );

                 });
               });
4

1 回答 1

1

您所拥有的当然是可行的，但您可能需要一个单独的函数来循环指定对象（例如，您可以使用一个函数 for 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/

于 2013-10-04T13:10:50.790 回答