JavaScript テンプレートエンジン作成

Posted by dab | 2007年9月20日 木曜日 17:47:22 < だぶ天, コンピュータ >

JavaScript用テンプレートエンジン。またしょーもない物を作ってます。

まぁ、いわゆるAjax用のライブラリですね。
JSON形式のデータを渡せば、そのキーと値をそっくりそのままHTMLのテンプレートに反映させると言うだけです。
ていうか、使い所があるんでしょうか。
ま、一応、SpryBBSの管理画面に組み込もうとかフルAjaxなサイトで使う予定ではありますが。。。

一応、PerlモジュールのHTML::Templateに似た書き方にしたわけですが、、、
とりあえずHTML標準モードでの動作は何とか動いてくれてるようです。
これから嫌なバグつぶしですよ><
めんどくさーっ

<table>
<tbody>
{tpl::repeat=/users}
<tr><td>{tpl:name}</td><td>{tpl:mail}</td></tr>
{tpl::endrepeat}
</tbody>
</table>

というHTMLファイルを用意して、テンプレートエンジンに登録したあと、

var data={users:[
{name: '諸星あたる', mail: 'moroboshi@example.jp'}
,{name: '面堂終太郎', mail: 'mendo@example.com'}
,{name: '三宅しのぶ', mail: 'miyake@example.net'}
]};

こういうデータを用意して、

document.getElementById('test').innerHTML=Template.GetHTML(templateID, data);

とか

document.getElementById('test').appendChild(Template.GetDOM(templateID, data));

とすれば、画面更新完了です。

<table>
<tbody>
<tr><td>諸星あたる</td><td>moroboshi@example.jp</td></tr>
<tr><td>面堂終太郎</td><td>mendo@example.com</td></tr>
<tr><td>三宅しのぶ</td><td>miyake@example.net</td></tr>
</tbody>
</table>

というのができあがります。

サンプルページとかは後日(おぃ)

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=83

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: