jTemplatesを使ってみる

ajaxでの通信後、HTML表示が面倒だなーと思ってたら、↓を発見。
業界的には気づくの遅いか？？

jTemplates

javascript内に書いたり、
HTMLコメントとして書いたり、
いろいろできるっぽいけど
テンプレートファイルに書き出すのがスマートっぽい。

テンプレートファイル

templateフォルダにsample.tplとか置いてみる。

<br />{#template MAIN}<br /><table id="dataTable" border="1"><br /><thead><br />    <tr><br />        <th>ID</th><br />        <th>名前</th><br />        <th>紹介</th><br />    </tr><br /></thead><br /><tbody><br />{#foreach $T as sample}<br />    <tr><br />        <td>{$T.sample.id}</td><br />        <td>{$T.sample.name}</td><br />        <td>{$T.sample.article}</td><br />    </tr><br />{#/for}<br /></tbody><br /></table><br />{#/template MAIN}<br />

JavaScript

jqueryと一緒に読み込んで、$(document).readyで書いてみる。
ちなみにjqueryは1.4.2

<br /><script charset="utf-8" type="text/javascript" src="/javascripts/jquery-1.4.2.min.js"></script><br /><script charset="utf-8" type="text/javascript" src="/javascripts/jquery-jtemplates.js"></script><br /><script type="text/javascript"><br />        $(document).ready(function() {<br /><br />            var datas = new Array();<br />            var data1 = {id:1, name:"IS03",   article:"ワンセグ、お財布ケータイ機能を持ったauのandroid"};<br />            var data2 = {id:2, name:"iphone", article:"Apple社の大人気スマートフォン"};<br />            var data3 = {id:3, name:"Xperia", article:"sony ericsson(docomo)のandroid"};<br />            var data4 = {id:4, name:"garaxy", article:"Samsung社製(docomo)のandroid"};<br /><br />            datas.push(data1);<br />            datas.push(data2);<br />            datas.push(data3);<br />            datas.push(data4);<br /><br />                $("#result").setTemplateURL("/templates/sample.tpl");<br />                $("#result").processTemplate(datas);<br /><br />        });<br />    </script><br />

なんとまあ便利なんだろうか！！