cutmail's blog

write the code

Javascriptで動的にチェックボックスを作る2

javascript

前回は、配列に格納した項目を
ループの中で文字列に埋め込み、チェックボックスを作りましたが、
こういう風に書くとカッコを数えたりするのがめんどくさいし、ミスにもつながりやすいですよね。

そこで、prototype.jsにはテンプレート機能なるものがあるので、今回はそのテンプレートを使用して前回のものを改良してみようと思います。

コードはこんな感じ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>テンプレートを使って動的にチェックボックスを作るサンプル</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("prototype", "1.6.0.3");</script>
	<script type="text/javascript">
		document.observe('dom:loaded', initCheckbox);
		function initCheckbox()
		{
			var values=['item1','item2','item3','item4'];
			var hoge = $('hoge');
			var tmpl = new Template('<input type="checkbox" name="genre" value="#{value}" id="#{id}">' + 
			 '<label for="#{id}">#{value}</label>');
			values.each(
				function (value, index){
					var chkboxstr = tmpl.evaluate(
					  {
					  	value:value.escapeHTML(),
						id:'genre_' + index
					  }
					);
					hoge.insert(chkboxstr);
				}
			);
		}
	</script>
</head>
<body>
	<form id="frm1">
		<div id="hoge"></div>
	</form>
</body>
</html>

なにが前回と違うのかということですが、何らかの値を埋め込んだ文字列を生成するのが簡単になります。同じ処理を繰り返すところでは、テンプレートオブジェクトのようなものを使ったほうが、あとあと理解しやすかったりもするんじゃないんですかねー。