prototype.jsのTemplateクラスが便利

プログラム

今更ながら使ってみて便利なことに気づく。

<ul>
   <div id=list></div>
</uL>

の様なHTMLがあったときに、JavaScript側から、

// prototype.jsはこの前で読まれているとして...
var listdata = [{"date":"2008/4/14", "title":"今日買った本"}, {"date":"2008/4/13", "title":"ラーメン"}];
var template = new Template("<li>#{date} - #{title}</li>");

liststr = "";
for(var i=0; i<listdata.length; i++){
   liststr += template.evaluate(listdata[i]); 
}
$('list').innerHTML = liststr;

などとやってやると、次の様に処理される。

<ul>
   <div id=list>
      <li>2008/4/14 - 今日買った本</li>
      <li>2008/4/13 - ラーメン</li>
   </div>
</uL>

つまり、Templateクラスのインスタンスを作る際に渡された文字列のテンプレート中の変数名と連想配列のキーを照合して、連想配列の値にテンプレートの変数の箇所を置換してくれる。


このライブラリにはまだまだ使ってない機能が山の様にあるので、早く押さえたいところです。