マイクロテンプレートエンジン jQuery Tempura
2013年8月4日
jQuery Tempura は jQuery 依存の簡単な Templating Engine です。
この記事のものや jQeury Plugin Registry などを調べたのですが、
自分の要望を満たすものが無いので、オレオレにしちゃいました。
特徴
- 普通のHTMLファイルの上から、正しいHTMLを維持したまま使える
-
- {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。
- これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。
- 必要な部分だけを更新する
-
- 更新の度に、テンプレ全体を再生成しない。
- テンプレ変数が足りなくても空白になったりしない、前の状態が残る。
- なので、イベントハンドラを生かし易い。大体のケースではテンプレ全上書きよりは高速。再描画時のチラ付きを抑える。という利点がある
- 使い方が簡単
-
- レンダリング時に、Object でテンプレ変数群を渡すだけ。
- ありがちな処理の分岐は、型で挙動を変える。
例えば、stringならテキスト更新、true/falseなら表示/非表示切り替え、objectならattr/style変更、という具合。 - リストを生成するなどの複雑な処理は諦めた。jQuery生操作するか、他のテンプレエンジンと併用してもらうことになる。
- 良く使う処理は可能な限り簡単に、そうじゃないものは受け口は作るから頑張って、という思想です。
- 本当は PURE を使いたかったんだけど、「使い方がパッと見てわからない、直感的じゃない」という一点で止めた。
テンプレの記法は特に忘れやすいので、鉄板のもの以外は簡単さ重視にしたい。
（どうせ１・２年すれば一回り便利なものが出てるし）
- コード量が少ない
-
- コメント抜くと 150 行くらい。
- サポート範囲
-
- IE10/9/8/7, Chrome, Firefox, Safari, Mobile Safari, PhantomJS
- jQuery 1.10.2, 1.9.1, 1.8.3, そして 2.0.3
使い方
例えば、このHTMLは:
<div class="welcome-page">
<h1 data-bind="title">Title</h1>
<p data-bind="contents">Contents</p>
<p data-bind="ero_contents">Aha-n</p>
<p data-bind="footer">Footer</p>
</div>
<script>
$(".welcome-page").tempura({
title: "Changed Title",
contents: "Changed contents",
ero_contents: false
});
</script>こんな風に表示されます:
<div class="welcome-page">
<h1 data-bind="title">Changed Title</h1>
<p data-bind="contents">Changed contents</p>
<p data-bind="ero_contents" style="display:none;">Aha-n</p>
<p data-bind="footer">Footer</p>
</div>詳細は GitHubのREADME を参照願います。
.. 英語変だったら指摘してくれるとうれしかったり。