それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

マイクロテンプレートエンジン jQuery Tempura

jQuery Tempura は jQuery 依存の簡単な Templating Engine です。

この記事のものや jQeury Plugin Registry などを調べたのですが、
自分の要望を満たすものが無いので、オレオレにしちゃいました。

特徴

普通のHTMLファイルの上から、正しいHTMLを維持したまま使える
  • {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。
  • これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。
必要な部分だけを更新する
  • 更新の度に、テンプレ全体を再生成しない。
  • テンプレ変数が足りなくても空白になったりしない、前の状態が残る。
  • なので、イベントハンドラを生かし易い。大体のケースではテンプレ全上書きよりは高速。再描画時のチラ付きを抑える。という利点がある
使い方が簡単
  • レンダリング時に、Object でテンプレ変数群を渡すだけ。
  • ありがちな処理の分岐は、型で挙動を変える。
    例えば、stringならテキスト更新、true/falseなら表示/非表示切り替え、objectならattr/style変更、という具合。
  • リストを生成するなどの複雑な処理は諦めた。jQuery生操作するか、他のテンプレエンジンと併用してもらうことになる。
  • 良く使う処理は可能な限り簡単に、そうじゃないものは受け口は作るから頑張って、という思想です。
  • 本当は PURE を使いたかったんだけど、「使い方がパッと見てわからない、直感的じゃない」という一点で止めた。
    テンプレの記法は特に忘れやすいので、鉄板のもの以外は簡単さ重視にしたい。
    (どうせ1・2年すれば一回り便利なものが出てるし)
コード量が少ない
  • コメント抜くと 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 を参照願います。

.. 英語変だったら指摘してくれるとうれしかったり。

ダウンロード

または:

$ bower install jquery.tempura

3 Responses to “マイクロテンプレートエンジン jQuery Tempura”


コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives