Mach3.laBlog

シンプルなjQueryテンプレートプラグインを書いてみる

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

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

jQuery.render()

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にも反映)

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

mach32ac00a19d261ed2dfb9c3434899a1ce9
お使い頂けて幸いです!これを機会にメソッドを大幅に改善いたしました。
カニュ916d908a067193d642f12f8dcfd849a7
ありがとうございます。
重いライブラリーを導入するより、上記methodを使ったほうがよいと個人的に思います。
弊社の(開発部)新人の研修で使わせていただきました!ありがとうございます。
mach32ac00a19d261ed2dfb9c3434899a1ce9
ありがとうございます!このスクリプトはかなり古く、改めて見るとあまり良くない箇所も結構ありますので、今現在、個人的にはunderscoreの_.templateを薦めています。

折角の機会なので後ほど少し改定してリリースさせて頂きますね。
カニュ42169955926fb6f7a3f1ff43d6fda643
記事ありがとうございます!
重いテンプレートエンジンを導入するより(jsrender等) このプラグインのほうがいいですね。