jTemplatesを使ってみる

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

jTemplates

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

テンプレートファイル

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

view plainprint?
{#template MAIN}  
<table id="dataTable" border="1">  
<thead>  
    <tr>  
        <th>ID</th>  
        <th>名前</th>  
        <th>紹介</th>  
    </tr>  
</thead>  
<tbody>  
{#foreach $T as sample}  
    <tr>  
        <td>{$T.sample.id}</td>  
        <td>{$T.sample.name}</td>  
        <td>{$T.sample.article}</td>  
    </tr>  
{#/for}  
</tbody>  
</table>  
{#/template MAIN}  
<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

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

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