DOM.TAL

Zope内蔵のテンプレートシステム、ZPT(Zope Page Template)ではTemplate Attribute Language (TAL)という記法が使われている。HTMLタグ属性にテンプレート記法を書く。繰り返し、条件分岐、変数定義、置換等、一般的な機能は持っている。
以下の例では、context.objectValues配列を先頭から取り出しループ内でitem変数として参照する。ループ内ではitem.getId, item.meta_type, item.titleを参照してtdの値に置換される。

<tr tal:repeat="item context/objectValues">
  <td tal:content="item/getId">Id</td>

  <td tal:content="item/meta_type">Meta-Type</td>
  <td tal:content="item/title">Title</td>
</tr>

Zope以外にも、XSLT,Java,PHP,Perl,Python等での実装もある。javascriptでの実装をPetal経由で見つけた。この実装では、TALのcontent, replace, omit-tag, attributes, condition, repeatが機能する。

TALprocess(document, oData);

onloadで上記を実行する。第一引数にはTAL記法を含むDOMを、第二引数にはTAL内で参照する変数を含むJSONを指定する。前のtalの例だと、

oData = {
  context: {
    objectValues: [
      { getId: 0, meta_type: 0, title: "0"},
      { getId: 1, meta_type: 1, title: "1"},
    ]
  }
};

のようになる。(上のtal例はzopeの解説ページからの引用だからgetIdはpythonオブジェクトのメソッドイメージだと思うけど…)

自分用にJSANモジュール化し、動的に処理するようにしてみた。JSANモジュール化以外は手を加えていない。DOM解析するため、対象となるテンプレートを一度innerHTMLに入れてから処理するのがかっこ悪い。処理してから入れるか、入れてから処理するかの違いだけど。

テンプレート記法部分をhiddenなタグで囲まなくても余計な要素がレンダリングされないので、ページデザイン先行でアプリケーション機能を組み込んでいく場合に有効だと思う。プログラマとしてはタグ閉じとか面倒だし、HMTLもJSONで構造書いたほうがかっこいい気がするけど、aptana.tv見たら高機能なエディタは勝手にタグ閉じやってくれるみたいだし、デザイナさんが使い慣れた道具で普段どおり作業できることのほうが重要な場合もあると思う。