Teeda Ajax & JQuery & JTemplates

以前の記事でTeeda Ajax＆JQueryでテーブルの追加、削除を実装した
記事を載せた。しかしまだ効率が悪いことで、JTemplatesとなるもをCTOAから
ききJTemplatesはvelocityなどとにいているから使いやすいとのことでつかってみた

Teeda Ajaxでは通信のみ
JQueryで管理
JTemplatesで表示系を実施

下記サンプル例
初期ローディングを行い、表を表示
-----------------------------Sample
html-----------------------------------------

// 下記をインクルード

<script language="javascript" src="../include/lib/ajax.js"
type="text/javascript"></script>
<script language="javascript" src="../include/lib/jquery.js"
type="text/javascript"></script>
<script language="javascript"
src="../include/lib/jquery-jtemplates.js"
type="text/javascript"></script>

// 実装部分　Ajax連携
<script type="text/javascript">
// イニシャル処理
$(document).ready(function(){
// ローディング
$('#testList').empty().append( '<img src="../img/loading.gif" />' );
// Teedaでデータの読み込み 引数はなし
Kumu.Ajax.executeTeedaAjax(test_ajaxTest, [], Kumu.Ajax.RESPONSE_TYPE_JSON);
});
function test_ajaxTest(res){
// ローディングをクリア
$('#testList').empty();
// テンプレート読み込み
$("#testList").setTemplateURL("./testList.tpl");
// JSON形式のデータを取得しテンプレートに引き渡す
$('#testList').processTemplate(res);
}
</script>
-----------------------------Sample
html-----------------------------------------
-----------------------------Sample
test.tpl-------------------------------------
{#template MAIN}
<table>
{#foreach $T as row}
<tr><td>{$T.row.a}</td></tr>
<tr><td><input type="text" value="{$T.row.b}"/></td></tr>
{#/for}
{#/template MAIN}
-----------------------------Sample
test.tpl-------------------------------------

Teeda Ajaxは以前の記事参照
http://iret-ceo.blogspot.com/2007/10/teeda-ajax-jquery.html
JSONの形式
[
{a: 1, b: 'test1'},
{a: 2, b: 'test2'},
{a: 3, b: 'test3'}
]

テンプレートにすることによってかなり簡潔に書けるようになった。
これは便利今後ともつかわねば

SUZ-LAB
http://suz-lab.blogspot.com/2007/11/jtemplatesjquery.html
CTOA参考
http://app.blog.livedoor.jp/hiroki0907/tb.cgi/50965571