jQueryテンプレートプラグインを頭に入れようとしています。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"
]
}
私は、このJSON配列を取得し、この配列などで「aaData」内の、この内の各オブジェクトのためのTRノードテンプレートを適用するためにjQueryのテンプレートを使用しようとしています個々のデータのために別々の 'td'ノードをレンダリングするだけでなく、
しかし、私が見たすべての例では、オブジェクト内の各データ(つまり「名前」、「値」など)にユニークな名前を付けて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ノードのクラスを 'odd'と 'even'の間で交替させたいと考えています。これは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ノードのデータはレンダリングされません。 Firebugによると、すべてのデータは最初の 'tr'ノードに結び付けられています。
どこが間違っているのですか?
私は実際にこのJSONを生成するPHPコードにアクセスできます。しかし、私はそれを変更する立場にはありません。他の多くのコードでは、JSONが現在のフォーマットと正確に一致している必要があります。何か他のものに影響を与えないように条件付きで修正できる方法があれば、このようなバックエンドの変更がなければ、完全にクライアントサイドのソリューションを望んでいました。 jQueryテンプレート{{each}}関数を使用してデータを繰り返し処理し、テンプレートによってアクセスできる名前を割り当てる方法はありませんか? – gordyr
こんにちはRichard、私は条件付きでサーバー側のスクリプトを変更して、使用例のみを有効にしても動作させることはできません。元の質問を新しい情報で更新しました。何か案は?ありがとう! – gordyr
新しいコードで構文エラーが発生しました。今はうまくいきます。とにかくありがとう。 – gordyr