超軽量のテンプレートエンジン「t.js」 JavaScript Library Archive

超軽量のテンプレートエンジン「t.js」

Check Tweet

配布元 : jasonmoo/t.js
ライセンス:MIT License

t.jsは400KBと非常に軽量なテンプレートでエンジンです。

基本的な利用方法

使い方も非常に簡単で以下のように記述をすると

var template = new t("<div>Hello {{=name}}</div>");
document.body.innerHTML = template.render({name: "World!"});

以下の様なHTMLがbody要素内にレンダリングされます。

<div>Hello World!</div>

サンプル

エスケープして出力

テンプレート内を{{%name}}のように%で始めると<b>などのタグを&lt;b&gt;にエスケープした形に変更して出力します。

var template = new t("<div>Hello {{%name}}</div>");
document.body.innerHTML = template.render({name: "<b>World!</b>"});

↓

<div>Hello &lt;b&gt;World!&lt;/b&gt;</div>

サンプル

オブジェクトの出力

プリミティブな値だけではなくオブジェクトもテンプレートに渡すことができます。

var bar = {
	foo:"ok"
}
var template = new t("<div>{{=bar.foo}}</div>");
document.body.innerHTML = template.render({bar: bar});

サンプル

条件分岐構文

以下のように条件分岐構文も利用できます。

{{value}}valueがない場合{{:value}}valueがある場合{{/value}}

スクリプトにすると以下のコードです。

var template = new t("<div>{{value}} ok{{:value}} ng {{/value}}</div>");
document.body.innerHTML = template.render({"value": true});

サンプル

{{!…}}〜{{/!…}}を利用すると値がない場合の処理のみを記述できます。

{{!value}}valueがない場合{{/!value}}

繰り返し構文

{{@…}}〜{{/@..}}を利用すると繰り返し構文が利用できます。繰り返し構文内では_keyでキーを_valで値を取得できます。

var obj = {
	"key1-1":"val1-1",
	"key1-2":"val1-2",
	"key1-3":"val1-3",
}
var arr = ["val2-1","val2-1","val2-1"];
var template = new t("<div>{{@obj}}{{=_key}}/{{=_val}}<br>{{/@obj}}</div><hr><div>{{@arr}}{{=_key}}/{{=_val}}<br>{{/@arr}}</div>");
document.body.innerHTML = template.render({obj:obj,arr:arr});

これは以下の様なHTMLを出力します。

<div>
	key1-1/val1-1<br>
	key1-2/val1-2<br>
	key1-3/val1-3<br>
</div>
<hr>
<div>
	0/val2-1<br>
	1/val2-1<br>
	2/val2-1<br>
</div>

スポンサードリンク

コメント

カテゴリー：テンプレート

直前:IE8以下をHTML5の新要素に対応させる為の「html5shiv」