Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

JSON→HTMLへぶち込む　その２

技術

以前のはダメすぎだったのでこーいうのはどうかなと。
（ダメな理由は見ればわかる）
繰り返しの元ネタはdisplay:noneで描画すらしなくしておくと綺麗。
前は無駄な事が多すぎたので今回はもっとシンプルにしてみた。
ったら出来たっぽよ。

javascript

    _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;
       	            if(parent.nodeType == 3){
           	        	parent = parent.parentNode;
               	    }
                    var orig = node.cloneNode(true);
                    parent.removeChild(node);
                    for(var j = 0; j < o.length; j++){
                        var obj = o[j];
                        var clone = orig.cloneNode(true);
                        if(clone.style.display == 'none'){
	                        clone.style.display = '';
                        }
                        parent.appendChild(clone);
                        for(var k in obj){
                            var temp = document.getElementById(k);
                            if(temp){
                                self._setJSONData(temp, obj[k]);
                               	temp.id = "";
                            }
                        }
                        clone.id = "";
                    }
                   parent.appendChild(orig);
                }else{
                    self._setJSONData(node, o);
                }
            }
        }
    }

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" type="text/javascript" src="../js/kumu/ajax.js"></script>
<script>
var o = {
  'test' : 'てすと',
  'test1' : 'てすと1',
  'test2' : [
  {
    'no':1,
    'name' : 'name1'
  }, 
  {
    'no':2,
    'name' : 'name2'
  }, 
  {
    'no':3,
    'name' : 'name3'
  }, 
  {
    'no':4,
    'name' : 'name4'
  }, 
  {
    'no':5,
    'name' : 'name5'
  }]
}


</script>

<title>AjaxSample</title>
</head>
<body>
<div id='test'>Test</div>
<div id='test1'>Test</div>
<div id='test1'>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="CHANGE" onclick="Kumu.Ajax.render(o);"> 
</body>
</html>

ほほほ。これはなかなか良いかもね。
id消してないので何回でも描画できます。
後は

  • 再描画の際、繰り返しで追加した要素を回収しやすくすために何か識別子埋め込む
  • 元々のidを描画後埋め込む

って事が出来ればなおよしって感じだね。
ニーズ次第で対応ッスな。
とりあえず土台はこんな感じです。
あとはMapping部に自由を与えるため、オーバライドできるように一部関数かしておけばええかなあ。
Teeda-Ajaxで使う場合は

function hoge_action(o){
    Kumu.Ajax.render(o);
}

ってやっておけばBean（DTO)のproperty名と同じidのHTML要素に値が入ってくれます。
とりあえず

property名=id名

にしとくとかなり楽できますよという話。
追記：
ほほーん、こんなのもアリかな。

function createCallBack(component, method, func){
  var returnFunc;
  if(func){
    eval("returnFunc = function "+component+"_"+method+"(json){func(json);};");    
  }else{
    eval("returnFunc = function "+component+"_"+method+"(json){Kumu.Ajax.render(json);};");
  }
  return returnFunc;
}

を使うともっといいかなあ？

Kumu.Ajax.executeTeedaAjax(createCallBack('ajaxHelloBean', 'ajaxAction2'), [name, arg1, arg2]);

こんな感じになりそうだけども。
createCallBack関数は無名関数をTeeda-Ajax形式(?)コールバック関数に変換することもできます。
まーパラメータでわたしゃあいいので要らないかも知れないけどね。
ニーズがあればコミットします。
うくく。