簡易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で表示したりとか小数点切り捨てたりとか。