Javascript Template

AJAXで受け取ったXMLをどうレンダリングするか、それが問題です。XSLTという手もありますが、如何せん面倒くさい。そこで、Javascriptのテンプレートを使うのが、今のところはよいのではないでしょうか。

  1. http://trimpath.com/project/wiki/JavaScriptTemplates
  2. JKL.Hina - テンプレート展開クラス
  3. Ajax Pages

といろいろありますが、直感的にわかりやすいのはASPやJSPと記法が似ている、AjaxPagesです。
これを[ajax] JKL.ParseXML／ajax通信処理ライブラリでXMLをJSONに変換してやると非常に簡単です。

以下はAWSを使って本の画像を一覧表示するサンプルです。AJAXのレスポンスを受けとったところからHTML生成までのコードです。

<script src="jkl-parsexml.js" type="text/javascript"></script>
<script src="AjaxPages.js" type="text/javascript"></script>
 
// 中略
var xml = t.responseXML;
var doc = xml.documentElement;

var parseXml = new JKL.ParseXML;
var obj = parseXml.parseDocument(doc);

if (doc) {
	books = obj.ItemSearchResponse.Items.Item;
	var ajp = new AjaxPages();
	ajp.load("book_list.ajp");
	var processor = ajp.getProcessor();
	for (var i=0; i < books.length; i++) {
		$("books").innerHTML += processor({book:books[i]});
	}
}

で、テンプレートをbook_list.ajpという名前にしているので、以下の内容を記述します。

<a href="<%=context.book.DetailPageURL%>"><img
  src="<%= context.book.SmallImage.URL %>"
  alt="<%= context.book.Title %>"
  border=0
></a>

Javascriptながら非常にスッキリした形で、デザインとロジックの分離ができます。