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行くらいしかないし)として使えそうでしたら、どうぞご利用ください。