jQueryでajaxメソッドを使って処理を行なっていると、
データを取得後、コールバックでHTMLデータの整形を行うので、
色々な処理が混ざってくるとコードが読みづらくなりがちです。
そこで、HTMLの整形している部分を分離するjQuery Templateというものがあったので、
その利用方法をメモ書きしておきます。
今回行ったこと
当ブログの右のサイドバーに表示されているPopular Entryの部分をjQuery Templateを使った処理に書き換えました。
準備
jQuery Templateを利用するためにはjQueryの他にjquery.tmpl.jsが必要となります。
jquery.tmpl.min.jsはミニファイ版となっています。
現時点ではBata版なので、今後どうなるかはわかりませんが、
今のうちから触っておいても損はないかと思います。
整形部分をちょっと変えたいって時も、テンプレートのファイルをいじるだけで修正が行えるので、
いじったら他が動かなくなった
Σ(ﾟдﾟlll)ｶﾞｰﾝ
てなことが少なくなるのではないでしょうか。
headにjquery.js、jquery.teml.min.jsの順番で読み込んでおきます。
上記２つのスクリプトを読み込ませた以降の行に、
のようなコードを書いておきます。
これが、テンプレートを記述しておく箇所となります。
typeに独自の形式を書くことで、ブラウザ側が無視して、
エラーを吐かないようになっています。
サンプルコードなどではこのscriptタグ内にテンプレートを記述していますが、
今回はその部分も外部から呼び出して埋め込むようにします。
これによって、テンプレートファイルは完全に別ファイルとなるので、
データの整形部分を修正する場合はそのファイルだけを修正すればよくなるわけです。
という訳で以下のテンプレートファイルを適当な場所に置いておきます。
temp.html
<li>
<a href="" title="${title}">${title}<span>${count}users</span></a>
</li>
${〇〇}の部分は取得したデータから利用する値を書きます。
"link":"http://d.hatena.ne.jp/〇〇", "count":"5", "title":"jQueryTemplateを使って..."
のようなjsonデータを返してくれるので、タイトルだったらtitle、ブックマーク数だったらcountの中に値が入っています。
これだけで、今まではループで値を取り出して整形を行なっていた部分をjquery.tmpl.jsが補ってくれます。
後はajaxメソッドで目的のデータを取得して、
目的の場所に成形後のデータを追加する処理をしてあげれば完成です。
下記のjsファイルを閉じbodyの直前で読み込んであげてください。
コード
jQuery(function($){
//Setting
var Sort = "count"; //はてブされているカウントが大きい順
var SiteUrl = "http://webdelog.info/"; //取得したいサイトのURL
var param = {'sort':Sort, 'url':SiteUrl};
var ajaxSetting = {
dataType: "jsonp",
data: param,
cache: true,
url: "http://b.hatena.ne.jp/entrylist/json",
success : function(data){Success(data);}
};
//DataLoad!!
$(function(){
$.ajax(ajaxSetting);
});
//callback
function Success(data){
//id：hatebuTemplate内にテンプレートファイルを展開しておく。
$( "#hatebuTemplate" ).load("http://webdelog.info/temp.html",
function(){
$( "#hatebuTemplate" ).tmpl(data).appendTo( "#recentryBox ul" );
//取得したデータをテンプレートに渡して整形したデータをappendTo中で指定した要素に突っ込む。
}
);
}
});
