prototype.jsのtemplateを使ってみた
prototype.jsのtemplateを使ってみた。
簡易的なテンプレートだと確かに思う。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript" charset="UTF-8" src="../prototype.js"></script> <title>テンプレート</title> <style type="text/css"> #temp { display:none; width:80%; height:100px; } #result { width:80%; height:100px; } </style> <script type="text/javascript"> function test(){ // templateをセットする var t = new Template($('temp').value); // 値 var values = [ { title : "Yahoo", url : "http://www.yahoo.co.jp/" }, { title : "はてな", url : "http://www.hatena.ne.jp/" }, { title : "livedoor", url : "http://www.livedoor.com/" } ]; // 繰り返し values.each( function (obj,count) { obj.count = count+1; dump( t.evaluate(obj) ); } ); } function dump(string){ //document.getElementById('result').value = ''; document.getElementById('result').value = document.getElementById('result').value + string; } </script> </head> <body> <a href="JavaScript:test();" title="テストを実行する">テストを実行する</a> <div id="document"></div> <textarea name="template" id="temp"><a href="#{url}" title="#{title}">#{count}#{title}</a></textarea> <textarea name="template" id="result"></textarea> </body> </html>