JavaScriptでテンプレートエンジン(jQuery templatesプラグイン)

PHPだとSmartyなどのテンプレートエンジンを利用したりするが、同様にJavaScriptでクライアントサイドでテンプレートに変数を流しこむ様な実装を行うことができるライブラリを探したところ、jQueryのtemplatesプラグインで実現できる様なので使ってみた。

Templates – jQuery API
A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM.
http://api.jquery.com/category/plugins/templates/

こういうのは、サンプルを見たほうが早いのでサンプルを以下に掲載。
jquery本体とプラグイン本体はサイトを直接指定している。

<html>
    <head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var json=[{"name":"Tom", "like":["apple", "peach"]}, {"name":"Mike", "like":["melon"]}];
			
			$("#child").tmpl(json).appendTo( "#parent");
		};
	</script>
	</head>
	<body>
		<div id="parent">
		<script id="child" type="text/x-jquery-tmpl"> 
			Name:${name}<br/>
			Like:
			{{each like}}
				${$value}
			{{/each}}

			<hr>
		</script> 
		</div>
	</body>
</html>