jQueryでテンプレート処理

jQueryプラグイン

jQueryでテンプレート処理を行ってみたくてjQueryのプラグイン作成の勉強がてらテンプレート処理プラグインを制作してみました。テンプレートエンジンはお馴染みのJSmartyです。

利用例

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JSmarty.js"></script>
<script type="text/javascript" src="JSmarty/Compiler.js"></script>
<script type="text/javascript" src="JSmarty/internals/system.jquery.js"></script>
<div id="contents"></div>

$('#contents').assign('foo','Hello World!!');
$('#contents').processTemplate('string:{$foo}');

alert(dcouemnt.getElementById('contents').innerHTML); // Hello World!!

assignはJSmarty#assignのラッパ関数。processTemplateはJSmarty#fetch関数のラッパになっています。

system.jquery.jsの中身

(function($)
{
    $.fn.assign = function()
    {
        var renderer = this.$getRenderer();
        renderer.assign.apply(renderer, arguments);
    };

    $.fn.$getRenderer = function()
    {
        return this.$renderer || function(self)
        {
            self.$renderer = new JSmarty();
            return self.$renderer;
        }(this);
    };

    $.fn.processTemplate = function(resourceName)
    {
        var renderer = this.$getRenderer();
        $(this).html(renderer.fetch(resourceName));
    };

})(window.jQuery);

ソース配布は

system.jquery.jsは0.5.0から採用予定です。Subversionには既にあげてあります。もう少しjQuery研究して仕様詰めてから正式公開していきたいです。