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}

JSmartyの場合は{ }の部分(デリミタを変更可能です)

注意事項

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