如何使用 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 数组，并为这个数组中的“aaData”中的每个对象应用一个 tr 节点模板，并为各个数据片段呈现单独的“td”节点。

但是，我看到的所有示例都将 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？