
今回はjQueryのプラグインのjQueryTemplatesを使ってみようと思います。
まずjQueryTemplatesのページへ行きgitHuv経由でプラグインをダウンロードします。
プラグインのページを参考にサンプルをつくってみました。
サンプル
<!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よりコッチのほうが良さそうですね。

コメントを残す