jQueryのテンプレートプラグイン【 jQuery.tmpl 】を使用する

jQuery Plugin .tmpl()

http://api.jquery.com/jquery.tmpl/

ダウンロードはこちら

https://github.com/jquery/jquery-tmpl

ソースは以下のとおり

手順は

1. jqueryとjquery.tmpl を読み込む
2. テンプレートを定義する（<!-- template -->で囲まれたところ）
3. データを定義する（ var data = ..... ; のところ）
4. テンプレートを表示する （ $tmpl ....... のところ )

です。

簡単ですね。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
</head>

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

<!-- template -->
<script id="template" type="text/x-jquery-tmpl">
  <li>${name}</li>
</script>
<!-- /template -->

<script>
var data = [ { "name" : "HOGE hofe" }, { "name" : "FUGA fuga" } ];
alert( $.tmpl( $('#template'), data ).html() );
$.tmpl( $('#template'), data ).appendTo( "#target" );
</script>

</body>
</html>