JavaScriptのレンダリングエンジンTempoが使いやすかった

JavaScriptのレンダリングエンジンをいくつか調べたのですが、その中でTempoが使いやすかったので、備忘録を兼ねてメモしておきます。

Tempo :: The Intuitive JavaScript Template Engine by Twigkit

Tempoはビューとロジックを分けて記述できるため、JavaScript中にHTMLが現れることがありません。

例えば、こういうJSONデータがあったとして、
[code lang=”js”]
var data = [
 {‘name’:{‘first’:’Leonard’,’last’:’Marx’},’nickname’:’Chico’},
 {‘name’:{‘first’:’Adolph’,’last’:’Marx’},’nickname’:’Harpo’},
 {‘name’:{‘first’:’Julius Henry’,’last’:’Marx’},’nickname’:’Groucho’},
 {‘name’:{‘first’:’Milton’,’last’:’Marx’},’nickname’:’Gummo’},
 {‘name’:{‘first’:’Herbert’,’last’:’Marx’},’nickname’:’Zeppo’}
];
[/code]

こういうテンプレートを記述し、

[code lang=”html”]
<ol id=”marx-brothers”>
 <li data-template>{{nickname}} {{name.last}}</li>
</ol>
[/code]

こうすると、

[code lang=”js”]
Tempo.prepare(‘marx-brothers’).render( data );
[/code]

このように展開されます。

[code lang=”plain”]

1. Chico Marx
2. Harpo Marx
3. Groucho Marx
4. Gummo Marx
5. Zeppo Marx
   [/code]

このように識別子が無いケースでは、

[code lang=”js”]
var data = [ ‘Leonard Marx’, ‘Adolph Marx’, ‘Julius Henry Marx’, ‘Milton Marx’, ‘Herbert Marx’ ];
[/code]

{{.}}を記述することでオブジェクトにアクセスすることができます。

[code lang=”html”]
<ol id=”marx-brothers”>
 <li data-template>{{.}}</li>
</ol>
[/code]

以下のように条件付きのテンプレートも記述できます。

[code lang=”html”]
<ul id=”marx-brothers3">
 <li data-template data-if-nickname=”Groucho””>{{nickname}} (aka {{name.first}}) was grumpy!</li>
 <li data-template data-if-actor>{{name.first}}, nicknamed ‘<i>{{nickname}} {{name.last}}</i>’ was born on {{born}}</li>

<! — Default template →
 <li data-template>{{name.first}} {{name.last}} was not in any movies!</li>
</ul>
[/code]

JSONでデータが返却されるサービスをレンダリングする際などに便利ですな。

サポートしているブラウザは、

Works in Safari, Chrome, FireFox, Opera, and Internet Explorer 6+

となっています。IE6も！