jTemplates (jQuery plug-in) の使い方まとめ

jTemplates

license : MIT, GPL
see : http://jtemplates.tpython.com/

何が出来るのか

jQuery単体ではhtmlの動的な生成を行う場合にコードが見づらくなってしまう。
jTemplatesはSmartyのようなテンプレートエンジンで、テンプレートを外部ファイル化する事もできる。
テンプレート化する事によるメリット・デメリットは既知のとおり。

ドキュメント

上記配布サイトにもオンラインドキュメントがあり、基本的な利用には十分に思える。
また、jTemplates.zip をダウンロードすると doc フォルダが含まれていて html ドキュメントがある。
(オンライン版もあったり : http://jtemplates.tpython.com/doc/symbols/Template.html)

使い方

基本的な使い方 js本体で利用する場合

テンプレートを作成

var _template =  '<table>'
                +'<tr><td>{$T.tbl_name}</td></tr>'
                +'<tr>'
                +'{#foreach $T.rows as row}'
                +'<td>{$T.row.name}</td>'
                +'<td>{$T.row.desc}</td>'
                +'{#/for}'
                +'</tr>'
                +'</table>';

テンプレートを実体化(createTemplate)

var _tmpl = $.createTemplate(_template);

テンプレートへ投入するデータを作成

var _data = {
        tbl_name   : 'coffee shop'
       ,rows       : [
            { name : 'Starbucks Coffee', desc : '' }
           ,{ name : 'TULLY\'S COFFEE',  desc : '' }
           ,{ name : 'EXCELSIOR CAFFE',  desc : '' }
        ]
}

テンプレートを反映したhtmlを取得して反映

var _html = _tmpl.get( _data, null, window );
$(適用対象要素セレクタ).html(_html);

htmlを変数に取得する必要がないのであれば次の方が簡単

// テンプレートをセットしてデータを引数にhtmlを流し込む
$(指定要素セレクタ).setTemplate( _template )
                   .processTemplate( _data );

テンプレートファイルを外部化して利用

テンプレートファイルを作成

// hoge.tpl
<table>
    <tr><td>{$T.tbl_name}</td></tr>
    <tr>
    {#foreach $T.rows as row}
    <td>{$T.row.name}</td>
    <td>{$T.row.desc}</td>
    {#/for}
    </tr>
</table>

js 本体ファイルから読込み

$(指定要素セレクタ).setTemplateURL( 'hoge.tpl' )
                   .processTemplate( _data );

※ データは上記のデータを利用

サーバサイドで動的にテンプレートを生成して非同期で取得

試していないけれど多分出来ると思う。
でも結局サーバサイドになると制作との分離のメリットが損なわれそうなので慎重に。

ネットで調べると既に実験していらっしゃる人もいるようで・・・・

レスポンスはjson形式にする必要があるらしい。
http://blog.livedoor.jp/hiroki0907/archives/50962390.html

特殊変数 $T $P $Q

jTemplatesには「$T $P $Q」という３つの特殊変数が出てくる。
テンプレートに対してhtml取得メソッドの get で説明すると、下記の引数指定で dataが$T、paramが$P、elementが$Q
としてテンプレート内部から参照できるようになるらしい。

get(data, param, element)

テンプレート実行時に与えたデータへの参照であり、デフォルトでエスケープされる
※エスケープしないようなオプション設定もある（ {filter_params : true} ）

var _data = {
        foo : 'hoge'
       ,bar : 'huga'
    }
   ,_template = '<span class="foo_class">{$T.foo}</span>'
               +'<span class="bar_class">{$T.bar}</span>'
;

$(指定要素セレクタ).setTemplate( _template, null, {filter_params : true} )
                   .processTemplate( _data );

テンプレートに適用するパラメタへの参照であり、デフォルトでエスケープされない
これも $T と同じような使い方だが、前もってパラメタを一度設定しておけば、
投入するデータを入れ替えて複数回のテンプレート反映を行うような場合に楽？
（変わらないならテンプレートに書けばいいのだけれど）

var _data_1 = {
        foo : 'hoge_1'
       ,bar : 'huga_1'
    }
   ,_data_2 = {
        foo : 'hoge_2'
       ,bar : 'huga_2'
    }
   ,_template = '<span class="foo_class">{$P.param_1}-{$P.param_2}</span>'
               +'<span class="foo_class">{$T.foo}</span>'
               +'<span class="bar_class">{$T.bar}</span>'
;

var _tmpl = $.createTemplate(_template)
             .setParam('param_1', 'aaa')
             .setParam('param_2', 'bbb');

var _html_1 = _tmpl.get( _data_1 );
var _html_2 = _tmpl.get( _data_2 );

テンプレートのコンテキストオブジェクト？
結局、テンプレート実行時に指定した要素がこれになり、
テンプレート内部からその要素の属性等を利用する場合に使うらしい。
下記サイトに詳しく掲載されている。
http://blog.livedoor.jp/techblog/archives/64748832.html

まだ色々ありそうなので後で追記する。