jquery-ptmplを拡張して、HTMLタグのclass属性を読み書きしやすく指定する

javascript テンプレートエンジン

jquery-ptmplでは、内部のほとんどの関数を簡単に置き換えられるようになっています。今日はその一例を紹介します。

<script src="jquery.js"></script>
<script src="jquery.ptmpl.js"></script>

<script>

(function (jQuery, undefined) {

var oldPtmplTranslateHtmlToLiteral = jQuery.ptmplTranslateHtmlToLiteral;
jQuery.ptmplTranslateHtmlToLiteral = newPtmplTranslateHtmlToLiteral;

function newPtmplTranslateHtmlToLiteral(str) {
	str = str
		.replace(/<(\w+)\.([\w-.]+)/g, function (all, tag, klass) {
			return '<'+tag+' class="'+klass.replace(/\./g, ' ')+'"';
		});
	return oldPtmplTranslateHtmlToLiteral(str);
}

})(jQuery);

</script>

jQuery.ptmplTranslateHtmlToLiteral関数は、テンプレートのコンパイル時にのみ呼び出され、テンプレート中のテンプレートタグ以外の部分（＝普通にHTMLが書いてある部分）を文字列リテラルに変換する関数です。

上記のコードでは、例えばを

に置き換えるような処理を、jQuery.ptmplTranslateHtmlToLiteral関数に追加しています。

この拡張によって、

<script id="template" type="text/x-jquery-tmpl">
  <div class="hoge">
    <div class="fuga">
      ...
    </div>
  </div>
</script>

と書く代わりに、

<script id="template" type="text/x-jquery-tmpl">
  <div.hoge>
    <div.fuga>
      ...
    </div>
  </div>
</script>

と書くだけで済むようになります。

jQuery Pluggable Templates Plugin
https://github.com/atsumu/jquery-ptmpl