Pure Javascript な jQuery Templates

Web プログラミングを行う場合、さまざまなテンプレートエンジンを使うことになると思います。
ただ、サーバサイドなテンプレートエンジンだと、ajax バリバリなページを作る場合に DOM との相性が悪く、冗長なコードになりがちです。(なりますよね？)

というわけで、Javascript なテンプレートエンジン、jQuery Templates を使ってみましょう。
jQuery Templates は現在β版で、 jQuery 1.5 にマージされるはずだったのですが、結局 1.5 には入っていないようです。
ダウンロード・ドキュメントはこのページから。
http://api.jquery.com/category/plugins/templates/

百聞は一見にしかずということで、簡単に書いてみます。

<script id="tmplUser" type="text/x-jquery-tmpl">
<li>${name} (${age})</li>
</script>

<ul id="users">
</ul>

$(function() {
    var users = [
        { name: 'foo bar', age: 20 },
        { name: 'hoge fuga', age: 30 }
    ];
    $('#tmplUser').tmpl(users).appendTo('#users');
});

ね、簡単でしょ？
.tmpl に配列を渡すと、自動的に複数のテンプレートに展開してくれます。

さて、ここまでは序の口。
次はテンプレートからテンプレートを呼び出します。

<script id="tmplUser" type="text/x-jquery-tmpl">
<li>
    ${name}
    <ul>
        {{tmpl(items) "#tmplUserItem"}}
    </ul>
</li>
</script>
<script id="tmplUserItem" type="text/x-jquery-tmpl">
<li class="item">${name}</li>
</script>

<ul id="users">
</ul>

$(function() {
    var users = [
        {
            name: 'foo',
            items: [
                { name: 'ひのきのぼう', power: 2 },
                { name: 'ラグナロク', power: 10000 }
            ]
        },
        {
            name: 'bar',
            items: [
                { name: 'エクスカリパー', power: 1 },
                { name: 'エクスカリバー', power: 10000 }
            ]
        }
    ];
    $('#tmplUser').tmpl(users).appendTo('#users');
});

ね、簡単でしょ？
さて、この謎のアイテムをクリックすると、power を alert するようにしてみましょう。
変更箇所は Javascript の最後の行だけです。

$('#users')
.delegate('.item', 'click', function() {
    var item = $(this).tmplItem();
    alert(item.data.power);
})
.append(tmpl)
;

ね、簡単…ですよね？
テンプレートごとに割り振られた値を $(this).tmplItem().data で取得できます。
ここでは {{tmpl(items) "#tmplUserItem"}} により、items が(勝手に)展開され、1つ1つのアイテムが取得できているかんじです。

また、tmpl() を実行した結果は jQuery object ですので、append する前にごちゃごちゃと操作することもできます。

var tmpl = $('#tmplUser').tmpl(users);
$('.item', tmpl).click(function() {
    var item = $(this).tmplItem();
    alert(item.data.power);
});
tmpl.appendTo($('#users'));

(続きはそのうち書く)