簡易Javascriptテンプレートエンジン

ループと条件分岐をバッサリすてたら、意外とまともなのがかけた気がするから、眠い勢いで紹介してみる。

http://github.com/umezo/umezone/blob/master/javascript/template.js

特徴

• 変数展開しかサポートしてない
• JSにコンパイルしている
• JSにコンパイルしてるのにエスケープが全く考慮されてない
• テンプレートはJSが実行されるページの要素の中に書く
• っていうかコメントの中に書く
• Chromeの拡張とかでかなり便利
• 多分オブジェクトのプロパティとか関数呼び出しは動く気がする・・・。

使い方

テンプレートはtemplate.jsを読み込んでいるページのHTML中にコメントで埋め込みます。

<div id="block">
<!--
<div id="{{$id}}">
   <header>{{$title}}</header>
  <p>{{$content}}</p>
</div>
-->
</div>

区切り文字はコレです。

{{$~}}

JS側ではテンプレートが入ってる要素のIdを渡すとそのままメソッドになります。
idがhogeならtemplate.hoge();

var template = getTemplate(["block"]);

var html = template.block({
   id : 1 ,
   title : "今日のおかず" ,
   content : "骨っこ"
});

テンプレートが入ってる要素はお好みでdisplay:hiddenしたりしてください。

予期してないけど動きそうなもの

<div id="cal"><!--
{{$sum(1,2)}}
--></div>

>||javascript|
var t = getTemplate( [ "cal" ] );
var html = t.cal({
sum : function( a , b ){ return a + b; }
});

|

まとめ

条件分岐はなくていいから、ループとフィルタが欲しい
タイムスタンプをいれるとYYYY/MM/DDで表示したりとか小数点切り捨てたりとか。