Trimpath JavaScript Templates

template engine

JavaScriptでもDjangoのテンプレートを使いたい, と思うのは私だけではないらしく,既に作った人がいた.

Django Template Language in JavaScript - Ajaxian

でもこれはDojoフレームワークの一部なので, 単品で使うことは難しそうだ. こんなまとめページもあった. ただ, 2年前のなので, ちょっと情報は古いのかもしれない.

なんとprototype.jsにもテンプレート機能があるらしい! と思って調べてみたら,単なる文字列置換機能でかなり貧弱.

いくつか見てみたが, ここにある, Trimpath JavaScript Templatesが良さそうだ. これもTrimpathというより大きなプロジェクトの一部なのが微妙だが, テンプレート単体で運用できる.

面白いのは, テンプレートをhidden なtextareaに書いておくことが推奨されていること.
なるほど, それならHTML本体にテンプレートを埋め込んでおくことができて, 便利だ. こんな感じで使うことができる.

<html>
   <head>
     <script language="javascript" src="trimpath-template-1.0.38.js"></script>
     <script language="javascript" src="prototype.js"></script>
	 <script language="javascript">
	   var data = {
	      items : [1,2,3,4,5],
	   }
	   function render(){
              var result = TrimPath.processDOMTemplate("template", data);
	      $("toShow").innerHTML = result;
	   }
     </script>
   </head>
   <body>
     <button onclick="render()">render</button>
     <textarea id="template" style="display:none;">
       <ul>
       {for item in items}
         <li> ${item} </li>
       {/for}
	   </ul>
     </textarea>
     <div id="toShow"> </div>
   </body>
</html>

Trimpath JavaScript Templates は, Djangoテンプレートよりも強力で, テンプレート内に任意の式を書くことができる. こんな風に比較式の中身も思いのまま.

  {if items.length > 0}
      <ul>
      {for item in items}
         <li> ${item} </li>
      {/for}
      </ul>
  {/if}

Djangoのテンプレートでは変数と変数プロパティの参照はできるけど, 例えば関数の実行なんかはできない.

これだと, テンプレートの中で副作用のある式をがんがん実行できてしまったりして, 実行の順序やら回数やら, 深く考え始めると面倒な問題がいろいろありそうだ.機能が強力すぎるので, テンプレート主導でページを書くこともできてしまいそう. そうなると, ページのロジックと表示部分の分離という観点からは, 好ましくないだろう.

Djangoテンプレートで任意の式が書けないのは, そういう問題をさけるためなのかも.単にパーザが面倒だったのかもしれないけど. __get__()を再定義してしまえば, 副作用を持たせることもできてしまいそうだし.

ちなみに, Trimpath JavaScript Templatesにはマクロ機能まであるようだ. 便利ではあるだろうけど, ちょっとやり過ぎのような気がしないでもない.