軽量なJavaScriptテンプレートエンジンを作った

LTemplate
http://clonedoppelganger.net/javascript/LTemplate.html

デモ
http://clonedoppelganger.net/javascript/LTemplateDemo.html

JavaScriptのテンプレートエンジンには、簡単なものだとAjax Pagesとか、テンプレート文法までもっているものだとJSmartyとかTrimPathとか、まぁ色々ある。
何かのAPIとかを使ってサクっと遊んでみたいときとかに、JavaScriptで文字列結合してHTML整形するのは嫌だけど、かといってテンプレート言語使ってまできっちり書く気もないような、中途半端な場面で向いている軽量なテンプレートエンジンが欲しかったけれど、見当たらなかったので。
リンク先にドキュメント書いたけれど、使い方などを簡単にご紹介。

まず、テンプレートはこんな感じ。

<h1>[%= context.title|escape %]</h1>
<p>[%= context.description|truncate:20|escape %]</p>
[% for (var i = 0; i < 10; i++) { %]
  Hello!<br>
[% } %]

[% %]で括られているところをJavaScriptのコードと解釈して、[%= %]で括られている部分をそのまま出力する。それで、[%= %]で出力する際には変数にフィルタをかけることができて、例えば

[%= context.title|escape %]

これだとtitleをHTML用にエスケープして出力する。フィルタはパイプでつなぐと連続で処理させることができて、

[%= context.description|truncate:20|escape %]

みたいな感じになる。あと、オプションのあるフィルタは:でつないで指定する。
JavaScript側のロジックはテンプレートを渡すことと、テンプレート内で利用するオブジェクトを渡すという2つの動作しかなくてこんな感じ。

var template = document.getElementById("template").value;
var context = {
title: "LTemplate",
description: "LTemplate is light weight template engine for JavaScript."
}
var tpl = new LTemplate(template);
var result = tpl.apply(context);
document.getElementById("out").innerHTML = result;

さっきのテンプレートが<textarea id=”template”></textarea>に入っている場合はこんなコードになる。

何かのテンプレートエンジンに既に慣れていたら必要ないと思うけれど、お気軽テンプレート(LTemplate自体のコードも300行くらいしかないし)として使えそうでしたら、どうぞご利用ください。

コメントする

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