軽量なJavaScript用のテンプレートエンジンです。テンプレート専用の制御文法はありませんが、雛形のHTMLに簡単にJavaScriptを埋め込むことができます。 また、変数出力時にはエスケープ処理などのフィルターを利用することができます。
以下のリンクからダウンロードしてください。
もっとも簡単な出力例です。
<script type="text/javascript" src="./LTemplate.js"></script>
<script type="text/javascript">
var tpl = new LTemplate("[%= context.message %]");
var result = tpl.applyTemplate({message:"Hello World!"});
alert(result); // Hello World!
</script>
はてなブックマークAPIを利用したデモです。
| 書式 | 説明 |
|---|---|
| object LTemplate ( string template ) | コンストラクタの引数で文字列としてテンプレートを渡します。 |
| string applyTemplate ( object context ) | applyTemplateメソッドの引数でテンプレート内で利用したい変数を渡します。 テンプレート内ではcontextという変数名で引数を利用できます。 戻り値はテンプレートを解釈した結果文字列となります。 |
LTemplateには、JavaScriptのコードとして解釈するか、もしくはJavaScriptの変数として出力するかの、どちらかしかありません。
| 書式 | 説明 | サンプルコード |
|---|---|---|
| [% %] | JavaScriptコードとして展開します。 | |
| [%= %] | JavaScript変数として評価され出力されます。 | |
| [%= |name %] | 出力時にフィルター処理を行います。 オプションは : でつなぎます。 フィルターについてはModifieを参照してください。 | |
変数出力時にModifierを通すことで、変数にフィルターをかけることができます。また、パイプ(|)でつなぐことによって、複数のフィルターを連続で処理することもできます。以下はModifierの使用例です。
[%= context.message|replace:"abc":"ABC"|truncate:60:"***"|escape %]
[%= new Date()|date_format:"Y/m/d H:i:s" %]Modifierのoptionに文字列を渡す場合には、必ずダブルクォートで囲む必要があります。シングルクォートは利用できませんので注意してください。
| 名称 | option 1 | option 2 | 説明 |
|---|---|---|---|
| escape | - | - | & < > " ' をエスケープします。 |
| encuri | - | - | encodeURIComponent関数と同等です。 |
| trim | - | - | 両端のホワイトスペースを削除します。 |
| nl2br | - | - | 改行を<br />に変換します。 |
| strip_tags | - | - | タグを除去します。（対象： /<(.|\n)+?>/g） |
| upper | - | - | 大文字に変換します。 |
| lower | - | - | 小文字に変換します。 |
| default | string default | - | 空文字の場合にoption 1を出力します。 |
| cat | string string = "" | - | 最後にoption 1を結合します。 |
| truncate | [number length = 80] | [string character = "..."] | option 1の長さの場合、切り捨てて最後にoption 2を出力します。 |
| date_format | string format | - | Dateオブジェクトをoption 1のフォーマットに変換します。 DateFormatterをロードしている場合にのみ動作します。 |
| replace | string search | [string replace = ""] | option 1をoption 2に変換します。 |
* []は必須でないoptionです。optionを渡さなかった場合は、= の値がデフォルトで設定されます。
[% 、 [%= 、 %] をそれぞれ構文ではなく文字列として扱いたい場合には、% の前にバックスラッシュを付けてください。具体的には左から、 [\% 、 [\%= 、 \%] とすることで構文回避できます。
構文内で構文回避する場合にも、バックスラッシュが一つという点に注意してください。例えば、[%= "[//%" %]ではなく、[%= "[/%" %]となります。これは構文内をJavaScriptとして解釈する前に構文解析を行っているためです。
テンプレート内では、JavaScriptの変数に __out と __cnt を使用することはできません。また、applyTemplateの引数オブジェクトは、context という変数名になります。
textareaに埋め込まれたテンプレートを展開するサンプルコードです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./LTemplate.js"></script>
</head>
<body>
<div id="out"></div>
<textarea id="template" style="display:none">
<h1>[%= context.title|escape %]</h1>
<p>[%= context.description|truncate:20|escape %]</p>
</textarea>
<script type="text/javascript">
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.applyTemplate(context);
document.getElementById("out").innerHTML = result;
</script>
</body>
</html>IE6SP2(Win)、IE7(Win)、Firefox2.0/3.0(Win)、Firefox2.0/3.0(Mac)、Opera9.23/9.50(Win)、Safari3.0.4(Win)、Safari2.0.4/3.1(Mac)で動作確認をしています。
LGPLライセンスのフリーライブラリです。