めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

prototype.jsのtemplateを使ってみた

JavaScript

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>