Valid XHTML 1.0! Valid CSS!

LTemplate Hatena bookmark

概要

軽量なJavaScript用のテンプレートエンジンです。テンプレート専用の制御文法はありませんが、雛形のHTMLに簡単にJavaScriptを埋め込むことができます。 また、変数出力時にはエスケープ処理などのフィルターを利用することができます。

ダウンロード

以下のリンクからダウンロードしてください。

Hello World

もっとも簡単な出力例です。

<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>

Demo

はてなブックマークAPIを利用したデモです。

API

書式説明
object LTemplate ( string template )コンストラクタの引数で文字列としてテンプレートを渡します。
string applyTemplate ( object context )applyTemplateメソッドの引数でテンプレート内で利用したい変数を渡します。
テンプレート内ではcontextという変数名で引数を利用できます。
戻り値はテンプレートを解釈した結果文字列となります。

構文

LTemplateには、JavaScriptのコードとして解釈するか、もしくはJavaScriptの変数として出力するかの、どちらかしかありません。

書式説明サンプルコード
[% %]JavaScriptコードとして展開します。
[% for (var i = 0; i < 10; i++) { %]
  Hello!
[% } %]
[%= %]JavaScript変数として評価され出力されます。
[%= context.message %]
[%= |name %]出力時にフィルター処理を行います。
オプションは : でつなぎます。
フィルターについてはModifieを参照してください。
[%= context.message|truncate:50|escape %]

Modifier (フィルター)

変数出力時にModifierを通すことで、変数にフィルターをかけることができます。また、パイプ(|)でつなぐことによって、複数のフィルターを連続で処理することもできます。以下はModifierの使用例です。

[%= context.message|replace:"abc":"ABC"|truncate:60:"***"|escape %]
[%= new Date()|date_format:"Y/m/d H:i:s" %]

Modifierのoptionに文字列を渡す場合には、必ずダブルクォートで囲む必要があります。シングルクォートは利用できませんので注意してください。

名称option 1option 2説明
escape--& < > " ' をエスケープします。
encuri--encodeURIComponent関数と同等です。
trim--両端のホワイトスペースを削除します。
nl2br--改行を<br />に変換します。
strip_tags--タグを除去します。(対象: /<(.|\n)+?>/g)
upper--大文字に変換します。
lower--小文字に変換します。
defaultstring default-空文字の場合にoption 1を出力します。
catstring string = ""-最後にoption 1を結合します。
truncate[number length = 80][string character = "..."]option 1の長さの場合、切り捨てて最後にoption 2を出力します。
date_formatstring format-Dateオブジェクトをoption 1のフォーマットに変換します。
DateFormatterをロードしている場合にのみ動作します。
replacestring 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ライセンスのフリーライブラリです。

更新履歴