JSON→HTMLへぶち込む
ってことをみんなやってるのに教えてくれない。
絶対ライブラリ化してるはずやのに教えてくれない。
テンプレートも使ってないはずやのに教えてくれない。
お、おおおおおっおっおおおおしえっろっ!
基本的にはidでmappingしてます。
きたねーソースだな(笑
render関数
_setJSONData : function(node, data){ if(node.hasChildNodes()){ node.childNodes[0].nodeValue = data; }else{ node.setAttribute('value', data); } }, render : function(json){ var self = Kumu.Ajax; for(var v in json){ var nodes = []; var elem = document.getElementById(v); while(elem){ nodes.push(elem); elem.id = ""; elem = document.getElementById(v); } for(var i = 0; i < nodes.length; i++){ var node = nodes[i]; node.id = v; var o = json[v]; if(o && o instanceof Array){ var parent = node.parentNode; var orig = node.cloneNode(true); var next; for(var j = 0; j < o.length; j++){ var obj = o[j]; var next; if(j == 0){ for(var k in obj){ var temp = document.getElementById(k); if(temp){ self._setJSONData(temp, obj[k]); temp.id = ""; } } }else{ var clone = orig.cloneNode(true); if(j == 1){ next = node.nextSibling; } parent.insertBefore(clone, next); for(var k in obj){ var temp = document.getElementById(k); if(temp){ self._setJSONData(temp, obj[k]); temp.id = ""; } } clone.id = ""; } } }else{ self._setJSONData(node, o); } node.id = ""; } } }
JSON→elementのマッピングは人それぞれでしょうね。
(属性に値を入れたい事もあるでしょう)
あと今回はidを消してます。
そこはお好みでon/offしてください。
Objectの配列に対応してるので
JSON
'test2' : [ { 'no':1, 'name' : 'name1' }, { 'no':2, 'name' : 'name2' }, { 'no':3, 'name' : 'name3' }, { 'no':4, 'name' : 'name4' }, { 'no':5, 'name' : 'name5' }]
HTML
<table border="1"> <tr> <td>-</td> <td>No</td> <td>Name</td> </tr> <tr id='test2'> <td>増えるわかめちゃんTest</td> <td id="no">Test</td> <td id="name">Test</td> </tr> </table>
のを展開できます。
(これだとtrが配列数分繰り返される)
まあいったらイメージ的にはね、Mayaaのパクリですよ。
参考になった、使いたい、こうした方がよいのでは?って人はコメント下さい。
うくく。