Я пытаюсь получить мою голову вокруг плагина jQuery templates.Как получить доступ к вложенным данным с помощью шаблонов 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» в этом массиве, как а также отдельные сегменты «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?
Большое спасибо.
EDIT:
мне удалось условно изменить на стороне сервера скрипт, так это для этого экземпляра он будет выводить 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>';
Но это еще не оказывающий данные в тре/TD узлах, которые он создает. Согласно firebug, все данные привязаны к исходному «tr» узлу.
Я не уверен, где я ошибаюсь?
У меня действительно есть доступ к php-коду, который генерирует этот JSON. Однако я не в состоянии изменить его, так как многие другие коды требуют, чтобы JSON находился в точно текущем формате, в котором он сейчас находится. Если бы какой-то способ я мог условно изменить его, чтобы не влиять ни на что другое, это было бы возможно, но я действительно надеялся на полностью клиентское решение без таких модификаций задней части. Невозможно ли использовать шаблоны jQuery {{each}} для перебора данных и назначения имен, которые затем могут быть доступны шаблону? – gordyr
Привет, Ричард, мне удалось условно изменить сценарий на стороне сервера, чтобы он мог только повлиять на мой пример использования, но все еще не может заставить его работать. Я обновил свой оригинальный вопрос с помощью новой информации. Есть идеи? Благодаря! – gordyr
Лома, что у меня была синтаксическая ошибка в моем новом коде. Теперь он работает нормально. Спасибо, в любом случае. – gordyr