今回は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よりコッチのほうが良さそうですね。
コメントを残す