jQueryのテンプレートプラグインjQuery Templates[JavaScript]


今回はjQueryのプラグインのjQueryTemplatesを使ってみようと思います。

まずjQueryTemplatesのページへ行きgitHuv経由でプラグインをダウンロードします。

jQueryTemplates

プラグインのページを参考にサンプルをつくってみました。
サンプル

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>jQueryTemplate</title>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.tmpl.js"></script>
	<script type="text/javascript">
	var infodata1 = {
		date:"2012.01.01",
		title:"明けましておめでとうございます。"
	};
	$(function(){
		$("#tmpl_info").tmpl(infodata1).appendTo('#info');
	});
	</script>
</head>
<body>

<h1>jQueryTemplate</h1>

<script id="tmpl_info" type="text/x-jquery-tmpl">
	<dt>${date}</dt>
	<dd>${title}</dd>
</script>

<dl id="info">
</dl>

</body>
</html>

ICANHAZ.JSと同じようにscriptタグにテンプレートを記述し、スクリプトでデータと併せていく形です。
tmpl()の実行結果が、データとテンプレートを併せたjQueryオブジェクトを返してくれるので、メソッドチェーンでかける or 慣れればワンライナーでシンプルに書けそうです。
まだ、基本機能しか試してないのですが、jQeuryな人はICANHAZ.JSよりコッチのほうが良さそうですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です