Ajax Pagesを使ってみる [2006/06/28]

Javascript でinnerHTMLをする時、デザイン部分(h2タグとかulタグとか)を書きたくない。分離したいのが普通。
そこでJavaScript のテンプレートエンジンを探していて辿り着いたのが『Ajax Pages』。デモで使用されていたのが、ver0.51なのでそちらを利用。

テスト用Javascript
-- ↓ --
function test() {
var outputArea = document.getElementById("test1");
var ajp = new AjaxPages();
ajp.addPage("hello.ajp");
ajp.onload = function() {
outputArea.innerHTML = ajp.process("hello.ajp", {hello:"ああああああ"});
}
ajp.loadPages();
}
-- ↑ --

テスト用テンプレート hello.ajp
-- ↓ --
<h2><%=context.hello%></h2>
test<br />
test<br />
-- ↑ --
これだけ。テストページはこちら。
出力部分を修正したい場合は、テンプレートを修正すればOK。
便利ですね。