シンプルなjQueryテンプレートプラグインを書いてみる
この記事は賞味期限切れです。(更新から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にも反映)
コメント
重いライブラリーを導入するより、上記methodを使ったほうがよいと個人的に思います。
弊社の(開発部)新人の研修で使わせていただきました!ありがとうございます。
折角の機会なので後ほど少し改定してリリースさせて頂きますね。
重いテンプレートエンジンを導入するより(jsrender等) このプラグインのほうがいいですね。