今回はシンプルなJavaScriptテンプレートエンジンICANHAZ.JSを使ってみたいと思います。

サンプル

まずはこちらのサイトからデータをダウンロードします。
URL：http://icanhazjs.com/

使い方はとってもシンプルw
以下サンプル。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>ICANHAZ.JS</title>
	<script type="text/javascript" src="js/ICanHaz.min.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var user_data_object = {
				name:"yamashiro",
				twitter:"yamajiro"
			};
			var user = ich.user(user_data_object);
			document.getElementById('target').innerHTML = user;	
		}
	</script>
</head>
<body>
<h1>ICANHAZ.JS</h1>

<div id="target"></div>

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>
</body>
</html>

コード解説

まずテンプレート定義部分のから。

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>

この部分がHTMLのテンプレートになります。
いつもはJavaScriptのタイプ属性を「text/javascript」としますが、「text/html」としてID属性を付けます。
で変数を入れる部分は２重の中括弧「{{　}}」で囲います。

続いて実際にデータをテンプレートに入れる部分。

var user_data_object = {
	name:"yamashiro",
	twitter:"yamajiro"
};
var user = ich.user(user_data_object);

「ich」が「ICANHAZ.JS」のオブジェクトです。
user()メソッドは、scriptタグで定義したテンプレートのID名のメソッドが自動で生成されるようです。
そのuserメソッドにそのままデータを渡せば生成されたHTMLを返してくれます。

あとはそのままターゲットに入れています。

document.getElementById('target').innerHTML = user;

非常にシンプルで使いやすいので、今度もう少し使い込んでみようと思います。