この記事は賞味期限切れです。（更新から1年が経過しています）

jQueryを用いたテンプレートエンジンについては、過去に記事で触れましたが、
cf) 「jquery.tmpl.js」による手軽なJavaScriptテンプレーティング
物は試しで自分で習作してみました。

jquery.render()

mach3’s js-jquery-render at master – GitHub

使い方については「jquery.tmpl.js」を参考にしています。
が、イベントの追加機能はつけていません。
（いまいち使い道が思いつかなかったので…）
jQueryプラグインなので、当然jQuery本体が必要です。

簡単な使い方

テンプレートをscript要素で宣言しておきます。
typeはtext/htmlにしておきます。

<script type="text/html" id="template">
<tr>
    <td>{{version}}</td>
    <td>{{birthDay}}</td>
    <td>{{unsupported}}</td>
</tr>
</script>

そのscript要素に対してrender()メソッドを実行すると、
生成されたHTMLを格納したjQueryオブジェクトが返ってきます。
append等を使用して表示したい箇所に挿入してやります。

$("#template").render(data).appendTo($("#Container"));

引数のdataには、オブジェクトまたは配列を渡してあげましょう。
配列の場合にはその要素の数、オブジェクトの場合は一度だけ、
HTMLの生成を繰り返します。

//配列の例
var data = [
    { version:"8", birthDay:"2009/3/20", unsupported:"-" },
    { version:"7", birthDay:"2006/11/2", unsupported:"-" },
    { version:"6", birthDay:"2001/8/27", unsupported:"2014/4/8" },
    { version:"5.5", birthDay:"2000/7/13", unsupported:"2005/12/31" },
    { version:"5", birthDay:"1999/3/18", unsupported:"2010/7/13" }
];
//単一オブジェクトの例
var data = { version:"6", birthDay:"2001/8/27", unsupported:"2014/4/8" };

デモページ

• デモページ

ソース

意外と短く済んだのでソースも書いておきます。

(function($, undefined){
    $.fn.extend({
        render: function(data, render){
            var tmpl, html, create;

            tmpl = this.html();
            html = "";
            create = function(t, d){
                var m = t.match(/\{\{(.+?)\}\}/g) || [], r = t;
                $.each(m, function(i, k){
                    var v = d[ k.replace(/\{|\}/g, "") ];
                    r = r.replace(k, ( v === undefined ) ? "" : v);
                });
                return r;
            };

            data = (data === undefined) ? {} : data;
            render = (render === undefined) ? true : false;

            if(! (data instanceof Array)){
                data = [data];
            }

            $.each(data, function(i, o){
                html += create(tmpl, o);
            });

            return render ? $("<div>").html(html).children() : html;
        }
    });
}(jQuery));

今回、テンプレートの変数に「{{…}}」を使っていますが、
これで不都合が生じるケースとかは…あるのかな…？

Ajaxコンテンツ等で軽くテンプレートを使用したい時に使ってみようと思います。

2014/05/27

括弧をエスケープしていなかったので修正

2014/05/27

ソースを全て修正（GitHubにも反映）