HTMLテンプレート
プロトタイプがなんか動いた。
テンプレート
KumuのHTMLテンプレートはMayaaやTeedaのようなidマッピングで動作する予定。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.foo {color:red }
.bar {color:blue }
</style>
<script language="JavaScript" type="text/javascript" src="../../../main/resources/org/seasar/teeda/ajax/js/kumu.js"></script>
<script language="JavaScript" type="text/javascript" src="../../../main/resources/org/seasar/teeda/ajax/js/ajax.js"></script>
<script>
var o = {
'test' : 'てすと',
'test@class' : 'foo',
'test1' : 'てすと1',
'test2' : [
{
'no':1,
'no@class':'foo',
'name' : 'name1'
},
{
'no':2,
'no@class':'bar',
'name' : 'name2'
},
{
'no':3,
'no@style':{'background-color':'red'},
'name' : 'name3'
},
{
'no':4,
'no@class':'bar',
'name' : 'name4'
},
{
'no':5,
'no@class':'foo',
'name' : 'name5'
}]
}
</script>
<title>AjaxSample</title>
</head>
<body>
<div id='test' style="display:none">Test</div>
<div id='test1' style="display:none">Test</div>
<table border="1">
<tr>
<td>-</td>
<td>No</td>
<td>Name</td>
</tr>
<tr id='test2' style="display:none">
<td>増えるわかめちゃんTest</td>
<td id="no">Test</td>
<td id="name">Test</td>
</tr>
</table>
<input type="button" value="INNER_TEMPLATE_RENDER" onclick="Kumu.Ajax.render(o);">
<input type="button" value="TEMPLATE_RENDER" onclick="Kumu.Ajax.render(o, './template.html', 'target');">
<div id="target" ></div>
</body>
</html>
テンプレートは２パターン。
- HTML内部にテンプレート部を記述
- 外部HTMLに記述
データ形式
データ形式はJSONで記述。
キーにあたる部分と同じidの属性を取得して値を埋め込む。
属性についてはid@属性名のキーでデータを作成する。
styleに関してはid@styleでキーを作成し、各propertyの値を設定する。
'no@style':{'background-color':'red'},繰り返し処理をしたい場合にはidにjsonのListをセットする。
データがListの場合にはその要素を繰り返し出力する。
呼び出し方法
内部に関しては
Kumu.Ajax.render(<データ>);
でレンダリングする。
外部に関しては
Kumu.Ajax.render(<データ>, <テンプレートのURL>, <埋め込む場所のid>, <要素を置き換えるか>);
今の所の懸念
- renderingされた後の要素のidが現状変わってしまっている。（複数回呼び出しに関連。まじめにキャッシュ化すれば...）
- idが内部と外部で重複する場合に複数回呼び出す事はできない（繰り返し部分のみ。繰り返し部のキャッシュが...）
- 外部テンプレート内jsは基本的に無効（何が呼び出されるかわからないからといった理由ではない）
うくく。
