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

あなたが持っているものは確かに実行可能ですが、指定されたオブジェクトをループする別の関数が必要になる場合があります (たとえばobject、 、object.nonTargeted、および に使用できる関数object.targeted)。

この場合に役立つと思われる概念の 1 つは、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 に答える