[Seasar-user:16773] [Kumu]テンプレートを使用しネストした繰り返し出力

2009年 1月 27日 (火) 22:48:01 JST

お世話になります。町田と申します。

Kumuのテンプレート機能を利用し行数不定、列数不定の表を
レンダリングしたいと思っております。

末尾に記述しますtext.htmlにてレンダリングされたページで、
ボタンをクリックするとtableタグの内容が以下のようにレンダリング
されることを期待しています。

=== 期待するレンダリング結果 ===
<TABLE border="1">
	<TBODY>
		<TR id="rowItems:rendered0" __id="rowItems:rendered0">
			<TD id="aaaa:rendered0" __id="aaaa">あ</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">○</SPAN>
			</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">×</SPAN>
			</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">△</SPAN>
			</TD>
			<TD id="bbbb:rendered0" __id="bbbb">い</TD>
			<TD id="cccc:rendered0" __id="cccc">う</TD>
		</TR>
	<TBODY>
</TABLE>

しかし実際に動作させてみると、以下のようにレンダリングされます。

=== 実際のレンダリング結果 ===
<TABLE border="1">
	<TBODY>
		<TR id="rowItems:rendered0" __id="rowItems:rendered0">
			<TD id="aaaa:rendered0" __id="aaaa">あ</TD>
			<TD id="bbbb:rendered0" __id="bbbb">い</TD>
			<TD id="cccc:rendered0" __id="cccc">う</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">○</SPAN>
			</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">×</SPAN>
			</TD>
			<TD id="cols:rendered0" __id="cols:rendered0">
				<SPAN id="col:rendered0" __id="col">△</SPAN>
			</TD>
		</TR>
	<TBODY>
</TABLE>

さらにボタンをクリックすると、以下のようにレンダリングされます。

=== もう一度ボタンをクリックしたレンダリング結果 ===
<TABLE border="1">
	<TBODY>
		<TR id="rowItems:rendered0" __id="rowItems:rendered0">
			<TD id="aaaa:rendered0" __id="aaaa">あ</TD>
			<TD id="cols">
				<SPAN id="col:rendered0" __id="col">○</SPAN>
			</TD>
			<TD id="bbbb:rendered0" __id="bbbb">い</TD>
			<TD id="cccc:rendered0" __id="cccc">う</TD>
		</TR>
	</TBODY>
</TABLE>

Kumu.jsの中を追えばわかるはずなのですが、お恥ずかしい話JavaScriptに
疎く追いきれません...。

まず、この挙動は仕様でしょうか？
仕様である場合、どのようなデータ、テンプレートを用意すれば期待した動作を
実現出来るか教えていただけないでしょうか？

最後に使用しているKumu.jsはteeda-ajax-1.0.13-sp4.jarより取り出したものを
使用しています。


=== test.html ===
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./kumu.js"></script>
<script type="text/javascript">
//<![CDATA[
var o = {
	'rowItems': [
		{
			'aaaa':'あ',
			'bbbb':'い' ,
			'cols':[
				{
					'col':'○'
				},
				{
					'col':'×'
				},
				{
					'col':'△'
				}
			],
			'cccc':'う'
		}
	]
}
var templ1 = new Kumu.Template();
//]]>
</script>
</head>
<body>
<form id="testForm">
<input type="button" value= "render" onclick="templ1.render(o)" />
	<table border="1">
		<tbody>
			<tr id="rowItems">
			 	<td id="aaaa"></td>
				<td id="cols">
				 	<span id="col"></span>
				</td>
			 	<td id="bbbb"></td>
			 	<td id="cccc"></td>
			</tr>
		</tbody>
	</table>
</form>
</body></html>

以上、宜しくお願い致します。
-- 
MACHIDA Takuya