読者です 読者をやめる 読者になる 読者になる

JavaScript Templates調べ

アブストラクト

JavaScript Templates(以下JST)はTrimPathプロジェクトにおけるテンプレート処理(MVCのV)を担うライブラリです。基本SyntaxはFreeMarker, Velocity, Smartyなどに似ており、ライセンスは、APL(Apacheライセンス)とGPL(GPL2)のデュアルライセンスである。

サンプルソース

tpl   = "${foo}${bar}";
context = {foo:"shogo", bar:"4405"};
tplObj  = TrimPath.parseTemplate(tpl);
result  = tplObj.process(context);

alert(result); // shogo4405 になりませんか?

基本API

JSTのコール(環境により異なります)

<script language="javascript" src="trimpath/template.js"></script>

TrimPath.parseDOMTemplate ( elementId[, optionalDocument ])

DOMエレメントのinnerHTMLからデータを抽出し解析してtemplateObjectを返す。構文解析エラーが生じた場合はパースエラーを放出します。

elementId document.getElementById(elementId).innerHTMLで取得する為のエレメントID。
optionalDocument どこのdocument要素を参照するか、例えばiframeやframsetなどのdocumentを参照する場合には対象のdocumentオブジェクトを渡します。標準はdocumentです。

*補足ですが <div id="elementId>テンプレートデータ</div>のinnerHTMLで呼び出すとタグの利用いかんによってはテンプレートデータが崩れるので<textarea style="display:none;">〜</textarea>をお勧めします。display:noneをお忘れなく。

TrimPath.processDOMTemplate ( elementId, contextObject[, optionalFlags[, optionalDocument ]])

DOMTemplateを解析してテンプレート実行結果(つまり、テンプレート処理済みの文字列)を返す。構文解析エラーが生じた場合は例外が発生します。elementId|TrimPath.parseDOMTemplateのelementIdに同じ|

contextObject templateObject.contextObjectに同じ
optionalFlags templateObject.optionalFlagsに同じ
optionalDocument TrimPath.parseDOMTemplateのoptionalDocumentに同じ
TrimPath.parseTemplate ( templateContentStr[, optionalTemplateName ])

第一引数の文字列を解析してtemplateObjectを返します。構文解析エラーが生じた場合は例外が発生します。

templateContentStr テンプレート文字列 例 "Hello ${firstName} ${lastName}"
optionalTemplateName テンプレート名。デバッグ時に利用
templateObject.process(contextObject[, optionalFlags ])

この関数はcontextObjectをtemplateObjectに統合します(結果としてテンプレート処理された文字列になる)。
contextObjectはObjectである必要があります。
optionalFlagsは null または以下のオブジェクトの必要があります。以下は例になります。

TrimPath.parseTemplate("${firstName}").process(templateContentStr, { throwExceptions : false, keepWhitespace : false });

throwExceptions 初期値false。例外を発生させるか否か。
keepWhitespace 初期値false。空白文字(改行。スペース。タブ)を残すか否か。
String.prototype.process( contextObject[, optionalFlags ])

Stringオブジェクトにprocessという便利メソッドを突っ込むようですね。JSTを読込むことによって、以下のような操作ができるようになります。 contextObjectやoptionalFlagsはtemplateObject.processのオプションに同じ。

str = "${foo}";
obj = {foo:"shogo4405"};

alert(str.process(obj)); // shogo4405

Template Syntax

JST JSmarty
変数 ${hoge}
${hoge.foo}
${hoge.bar()}
{$hoge}
{$hoge.foo}
{$hoge.bar()}
変数 修正子 ${hoge|modifier} {$hoge|modifier}
変数 修正子 引数 ${hoge|modifier:arg1,arg2} {$hoge|modifier:arg1:arg2}
変数 修正子 引数 修正子 引数... ${hoge|modifier0:arg01,arg02|modifier11:arg11,arg12|...} {$hoge|modifier0:arg01:arg02|modifier1:arg11:arg12|...}
if文 {if exp1}〜
 {elseif exp2}〜
 {elseif exp3}〜
 {else}〜
{/if}
{if exp1}〜
 {elsif exp2}〜
 {elsif exp3}〜
 {else}〜
{/if}
for文 {for x in o}
{forelse}
{/for}
{foreach from=$o key="x"}
{foreachelse}
{/foreach}
  1. JSmartyの場合は{ }の部分(デリミタを変更可能です)

注意事項

本稿は、http://trimpath.com/project/wiki/JavaScriptTemplatesを参考にして制作しましたが、オリジナルの訳ではないので注意お願いいたします。誤植あるかも知れませんので。