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”]
- Chico Marx
- Harpo Marx
- Groucho Marx
- Gummo Marx
- 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も！