까딱이의 춤과 IT

var callBackAjax = function(data){

var html = "<div>" + data.tVal +"</div>"

/// .... 중략

}

(function( $ ) {

    $.fn.generateHtml = function(data) {

    var html = $(this).html();

var array = html.match(/@{(\w+[.]?)+}/g);

if(array == null){

return html;

}

for(var i = 0 , len = array.length ; i < len ; i++){

html = html.replace(array[i], findValue(array[i], data));

}

return html;

    },

    findValue = function(key, data){

key = key.replace(/(@{|})/g, '');

return reclusive(key.split(".") , data);

},

reclusive  = function(keys, data){

var result = data[keys[0]];

if(result === undefined || result === null){

return '';

}

if(keys.length > 1){

return reclusive( keys.slice(1), result);

}

return result;

};

}(jQuery));

 // 사용할 HTML 의 구조를 만들고 ID 를 부여한다.

 // @{데이터의 key} 로 사용할 데이터를 명시한다.

<script id="templateTag" type="text">
    <div>
         <div> @{tVal} <div>
         <div> @{pVal} <div>
         <div> @{oee.tVal} <div>
         <div> @{oee.pVal} <div>
    </div>
</script>

<script>

$(function(){
 var testData = {tVal : 100, oee : {tVal:"233", pVal : "555"}} // 예시 데이터
 // pVal 값이 없는 경우는 공백입력됨
console.log($("#templateTag").generateHtml(testData)); 

})
</script>

실행 결과

    <div>
         <div> 100 <div>
         <div>  <div>
         <div> 233 <div>
         <div> 555 <div>
    </div>