2008年7月29日

mjtemplate

Mjt


mjt は、ブラウザ上で使えるJavascriptのテンプレートエンジンです。
Freebaseというサービスのために作られたらしいですが、その他のWebアプリケーションでも使えます。
オープンソースで、BSDライセンスです。
htmlの属性を使っている点は、KidテンプレートやGenshiなどによく似ています。

動かす準備


以下のコードがベースになります。
bodyタグの中にテンプレートを記述します。

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript"
src="http://mjtemplate.org/dist/latest/mjt.js"></script>
</head>
<body onload="mjt.run()" style="display:none">
<!-- PASTE YOUR MJT EXAMPLE HERE! -->
</body></html>


最初の例


<h3>hello<h3>


単純なHTMLはそのまま表示されます。

変数を表示する。



<script type="text/javascript">
var message = "Hello, world!";
</script>
<h1>${message}>/h1>

${expr}で、exprの評価結果を表示します。
exprが変数のみの場合は、$exprとしても同様の結果となります。
また、表示はデフォルトでエスケープされます。
HTMLを動的に生成して表示するなど、エスケープしたくない場合は、mjt.blessを介して表示します。


<script type="text/javascript">
var message = "<Hello, world!>";
</script>
${mjt.bless(message)}


制御とか


ifやforなど使えます。

<script type="text/javascript">
var message = "Hello, world!";
var flag = true
</script>
<p mjt.if="flag">
${message}
</p>
<p mjt.else="">
NG
</p>



<script type="text/javascript">
var values = [1,2,3,4];
</script>
<ul>
<li mjt.for="v in values">${v}</li>
</ul>



サブテンプレート


mjt.defで、サブテンプレートを定義できます。

<script type="text/javascript">
var values = ["http://example.com/","http://example.net/"];
</script>
<div mjt.def="mklink(url)">
<a href="${url}" title="${url}">${url}</a>
</div>
<ul>
<li mjt.for="v in values">${mklink(v)}</li>
</ul>



おわり


OpenSocialやガジェットなど、Javascriptで動的に表示させることも多くなってきました。
テンプレートエンジンを使うと、表示内容を推測しやすく、安全に値を表示できます。
文字列操作やDOMによる方法よりも格段に生産性がアップするのではないでしょうか。