jQueryでテンプレートエンジン作ってみた

このエントリーにインスパイヤーされて、jQueryで動くHTMLテンプレートエンジンを作ってみた。jQuery ver1.5以上。

変数を挿入するぐらいしか機能はありません。テンプレート内の<var class="foo" />という記述が変数のプレースホルダーになります。正規表現置換とかevalとか使わず、DOM操作で。

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <title>jQuery Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script src="./common/js/jquery.1.5.js" type="text/javascript"></script>
    <script src="./common/js/jquery.jsontpl.js" type="text/javascript"></script>
    <script src="./common/js/index.js" type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function(){
            $.jsontpl('body').byUrl('tpl.html', 'data.json');
        });
    //]]>
    </script>
</head>

<body>
</body>
</html>

tpl.html

<div>
    <var class="name2" />
    <var class="name" />
    <var class="name2" />
</div>

data.json

{"name":"foo","name2":"foo2"}

結果

body内が下記のようになります。

<div>
    foo2
    foo
    foo2
</div>

jquery.jsontpl.js

/**
 * jquery.jsontpl
 *
 */
;(function($) {

    var plugname = 'jsontpl';

    $[plugname] = $.subclass();

    function _parse (tpl, json) {
        var a = $(tpl);
        for (var name in json) {
            a.find("var."+name).after(json[name]).remove();
        }
        return a;
    }

    $[plugname].parse = _parse;

    $[plugname].fn.parse = function(tpl, json) {
        return this.html(_parse(tpl, json));
    }

    $[plugname].fn.byUrl = function(tpl, json) {
        var jq = this;
        $.ajax({
            type: "GET",
            url: tpl,
            success: function(data1) {
                $.ajax({
                    type: "GET",
                    url: json,
                    success: function(data2) {
                        jq.html(_parse(data1, eval('tmp='+data2)));
                    }
                });
            }
        });
        return this;
    }
})(jQuery);

 

jQueryでテンプレートエンジン作ってみた」への1件のフィードバック

  1. ピンバック: Tweets that mention jQueryでテンプレートエンジン作ってみた- jamadam weblog2 -- Topsy.com

コメントを残す

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