JSON 을 렌더링하는 JavaScript Templates
디자인/jQuery 2013. 8. 19. 12:58JSON 을 렌더링하는 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
'디자인 > jQuery' 카테고리의 다른 글
| jQuery event Handler 메소드 on() (0) | 2013.08.19 |
|---|---|
| jQuery closest(), parents() 메소드의 차이 (0) | 2013.08.19 |
| jQuery FullCalendar 달력 플러그인 (0) | 2013.08.19 |
| HTML5 data - Attributes (0) | 2013.08.19 |
| Ajax를 사용한 파일 업로드 JQueryFileUpload 플러그인 (0) | 2013.08.19 |