JSON 을 렌더링하는 JavaScript Templates

디자인/jQuery 2013. 8. 19. 12:58

JSON 을 렌더링하는 JavaScript Templates 

 

JAVA에서는 결과값을 HTML 코드로 렌더링하기 위해 JSP 파일내에서 EL 과 JSTL 을 사용합니다. JSP 내에서 <% %>을 사용해도 되지만 오류나 가독성으로 인해 권장되지는 않습니다.

흐름을 살펴보면 JAVA 파일 내부에서는 필요한 데이터를 DB에서 가져오고 해당 데이터를 렌더링을 담당하는 JSP 파일로 넘겨 JSP 파일내에서 HTML 로 렌더링을 처리하게 됩니다.

이때 JAVA 와 JSP 사이에서는 POJO 나 MODEL 객체를 사용하게 됩니다.

여기서 설명하고자 하는 JavaScript Templates 는 JSP 에서 하는 일을 JavaScript가 대신하게 됩니다.

JAVA에서는 DB에서 가져온 결과값을 JSON 으로 리턴하면 JavaScript Template에서 HTML로 렌더링하는 것이죠.

아직은 Javascript-Template 에서의 기능이 빈약하지만... 간단한 렌더링을 처리하는데는 사용할 수 있을 거라 생각합니다.

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="plugin/JavaScript-Templates-2.3.0/js/tmpl.js"></script>

<script type="text/x-tmpl" id="tmpl-demo">

<h3>사용자정보</h3>

<h4>{%=o.name%}</h4>

<ul>

{% for(var i=0; i<o.infos.length; i++){ %}

       <li>{%=o.infos[i]%}</li>

{% } %}

</ul>

</script>

</head>

<body>

<div id="userInfo"></div>

<script type="text/javascript">

var data = {

       "name" : "홍길동",

       "infos" : [

             "25",

             "인천"

       ]

};

document.getElementById("userInfo").innerHTML = tmpl("tmpl-demo", data);

</script>

</body>

 

</html>

 

간단하게 설명하면 위코드의 <script type="text/x-tmpl" id="tmpl-demo"> 부분이 기존의 JSP가 처리하던 부분입니다. 그리고 tmpl("tmpl-demo", data) 코드로 template 에 JSON 객체를 렌더링하게 됩니다.

template 내의 o 변수는 tmpl() 함수내에서 넘겨진 JSON 객체를 나타냅니다.

 

JavaScript-Template 을 사용하면 기존에 복잡한 문자열 연산을 통해 HTML 코드를 추가하던 부분을 조금은 단순화 시킬 수 있을것 같습니다.


JavaScript-Template 홈페이지

https://github.com/blueimp/JavaScript-Templates/tree/2.3.0



: