如何使用jQuery模板訪問嵌套數據

Question

我想讓我的頭圍繞jQuery模板插件。

我的JSON的格式如下： -

{ 
"sEcho":1, 
"total":"1710", 
"aaData":[ 
    [ 
     "Help", 
     "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3", 
     "1784", 
     "3", 
     0, 
     null, 
     "0000-00-00 00:00:00" 
    ], 
    [ 
     "A Day In The Life", 
     "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76f5fc253a1.mp3?JenWood_Zeppelin.mp3", 
     "3573", 
     "3", 
     0, 
     null, 
     "0000-00-00 00:00:00" 
    ] 
} 

我試圖使用jQuery模板藉此JSON陣列和該陣列中應用TR節點模板內「aaData」圖中的每個對象以及爲單個數據片段渲染分離的「td」節點。

但是我看到的所有例子都有JSON格式，這些JSON格式是對象中的每個數據的唯一名稱，例如「名稱」，「值」等。我無法重新格式化JSON源，因此我需要通過它的索引訪問嵌套的數據。

我的模板和代碼是目前這樣的： -

$.ajax({ 
    "dataType": 'json', 
    "url": '/wp-content/hovercard.php', 
    "data": 'user=' + $artistid + '&start=' + $start + '&finish=' + $finish + '&order=' + $orderValue + '&orderColumn=' + $columnValue, 
    "success": function(data, textStatus, jqXHR) { 

     var domain = data.domain; 
     var array = data.aaData; 
     var $table = $('#favourites-hovercard-table-' + $artistid); 

     var markup = '<tr class="odd">' 
         + '<td class="sorting_1"><div class="audio"><a href="${1}" class="sm2_button"><div class="play_button"></div></a></div></td>' 
         + '<td class="hovercard-song"><div class="hovercard-row"><span class="hovercard-songs ajax"><a href="' + domain + 'song/?songsID=${2}">${0}</a></span></div><div title="${5} people have voted on this song" class="ministars minitip dark-tooltip"><div class="star_1 ratings_stars ratings_vote"></div><div class="star_2 ratings_stars ratings_vote"></div><div class="star_3 ratings_stars ratings_vote"></div><div class="star_4 ratings_stars ratings_vote"></div><div class="star_5 ratings_stars ratings_vote"></div><div class="star_6 ratings_stars ratings_vote"></div><div class="star_7 ratings_stars ratings_vote"></div><div class="star_8 ratings_stars"></div><div class="star_9 ratings_stars"></div><div class="star_10 ratings_stars"></div></div></td>' 
         + '<td><div class="hovercard-row hovercard-rating hidden_column">${4}</div></td><td><div class="hidden_column hovercard-row">3</div></td>' 
         + '<td><div class="hidden_column hovercard-row"></div></td>' 
         + '<td class="hovercard-time"><div title="${6}" class="hovercard-row uploaded_time minitip timeago dark-tooltip">${6}</div></td>' 
        + '</tr>'; 

     $.template("favouritesTemplate", markup); 
     $.tmpl("favouritesTemplate", array).appendTo($table); 



     } 

}); 

正如你可以在上面看到，我的模板中，我試圖用$ {1} $ {2} $ {3}等..因爲未命名而訪問對象內的數據索引。

顯然這是錯誤的方法，我必須在這裏失去一些重要的東西。

如何訪問此數據？在我的模板中，以便按需將更多行添加到我的表中。

此外，我希望能夠交替'奇'和'偶'之間的tr節點的類。這是所有可能的jQuery模板？

非常感謝。

編輯：

我已成功地有條件地修改服務器端腳本所以這對於這種情況下它將輸出JSON數據完整，像這樣的對象名稱： -

 { 
    "sEcho":1, 
    "total":"1710", 
    "aaData":[ 
     [ 
      "song_name": "Help", 
      "song_file": "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3", 
      "songsID": "1784", 
      "user": "3", 
      "rating": 0, 
      "ratings_count": null, 
      "uploaded_time" "0000-00-00 00:00:00" 
     ], 
} 

，現在已更新我的模板如下： -

var markup = '<tr class="odd">' 
       + '<td class="sorting_1"><div class="audio"><a href="${song_file}" class="sm2_button"><div class="play_button"></div></a></div></td>' 
       + '<td class="hovercard-song"><div class="hovercard-row"><span class="hovercard-songs ajax"><a href="' + domain + 'song/?songsID=${songsID}">${song_name}</a></span></div><div title="${ratings_count} people have voted on this song" class="ministars minitip dark-tooltip"><div class="star_1 ratings_stars ratings_vote"></div><div class="star_2 ratings_stars ratings_vote"></div><div class="star_3 ratings_stars ratings_vote"></div><div class="star_4 ratings_stars ratings_vote"></div><div class="star_5 ratings_stars ratings_vote"></div><div class="star_6 ratings_stars ratings_vote"></div><div class="star_7 ratings_stars ratings_vote"></div><div class="star_8 ratings_stars"></div><div class="star_9 ratings_stars"></div><div class="star_10 ratings_stars"></div></div></td>' 
       + '<td><div class="hovercard-row hovercard-rating hidden_column">${rating}</div></td><td><div class="hidden_column hovercard-row">${user}</div></td>' 
       + '<td><div class="hidden_column hovercard-row"></div></td>' 
       + '<td class="hovercard-time"><div title="${uploaded_time}" class="hovercard-row uploaded_time minitip timeago dark-tooltip">${uploaded_time}</div></td>' 
      + '</tr>'; 

但它仍然沒有渲染它創建的tr/td節點中的數據。根據螢火蟲所有數據都被綁定到最初的'tr'節點。

我不確定我要去哪裏錯？

Answer 1

我不認爲你可以這樣做。所有的變量都需要命名。看看這個頁面：

http://api.jquery.com/jQuery.template/

你從哪裏得到的JSON？