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>