当たり前だが、jTemplatesを使えばブラウザ側だけでテンプレートを適用できる。わざわざサーバサイドでやる必要がないようなテンプレート処理なら、このプラグインを利用しない手はない。
以下のサンプルコードは、前に作ったツイート検索アプリを改造したものだ。クライアントサイドだけで動作するアプリである。
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-jtemplates.js"></script>
<script type="text/javascript">
$(function(){
var f = function(){
$.getJSON('http://search.twitter.com/search.json?callback=?',
{
q: 'ついったー',
rpp: 5
},
callback
);
}
function callback(data, status){
if(status == "success"){
$("#tw").setTemplate($("#tpl").html(), null, {filter_data : false});
$("#tw").processTemplate(data.results);
}else{
alert("ツイートの取得に失敗しました");
}
}
$("#btn").click(f);
});
</script>
<script type="text/html" id="tpl">
{#foreach $T as obj}
<div style="border-bottom:1px solid blue;">
<p>■オブジェクト:</p>
<p>$T.obj.created_a: { $T.obj.created_at }</p>
<p>$T.obj.from_user: { $T.obj.from_user }</p>
<p>$T.obj.text: { $T.obj.text }</p>
<p>■ステータス:</p>
<p>$T.obj$index: { $T.obj$index }</p>
<p>$T.obj$iteration: { $T.obj$iteration }</p>
<p>$T.obj$first: { $T.obj$first }</p>
<p>$T.obj$last: { $T.obj$last }</p>
</div>
{#/for}
</script>
<input type="button" id="btn" value="ツイート取得"/>
<div id="tw"/>
</html>
これを実査に動かしてみると以下のようになる。
まぁ使い方はソースを見ればわかるとして、注意したほうがいいポイントが1つだけある。それは、以下の部分だ。
$("#tw").setTemplate($("#tpl").html(), null, {filter_data : false});
setTemplateの第三引数で {filter_data:false} を渡しているが、これはHTMLのエスケープを回避するための記述だ。これが true だと、$T の中身は自動的にエスケープされる。第二第三引数は省略可能だが、そうするとデフォルトでHTMLがエスケープされているので注意が必要だ。
ここはひとつポチっとよろしく。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
posted with amazlet at 11.09.11
西畑 一馬
アスキー・メディアワークス
売り上げランキング: 1336
アスキー・メディアワークス
売り上げランキング: 1336
Twitter API ポケットリファレンス (POCKET REFERENCE)
posted with amazlet at 11.09.05
山本 裕介
技術評論社
売り上げランキング: 19589
技術評論社
売り上げランキング: 19589