handlebars js 라이브러리를 이용한 View 표현하기

2017. 5. 31. 10:31

[ HandleBars 적용하기 ]

: HandleBars는 Javascript 라이브러리 중 하나로, 보통 AJAX로 가져온 데이터를 JQuery에서 문자열로 조합한다음에 append해주는

불편함을 줄여주기 위해 주로 사용됩니다.

특징)

1. 태그를 이용해서 구성을 잡아준다.(템플릿을 만든다.)

2. 템플릿 사이사이에 데이터가 들어갈 곳에 {{ 변수 }} 로 넣어놓는다.

3. 템플릿과 데이터를 연결시 {{}} 부분에 데이터가 들어가게 된다.

이때, {{#변수}} {{/변수}} 부분에는 배열과 같은 타입의 데이터의 길이가 들어와 그 길이만큼 반복작업을 수행하게 된다.

제일먼저 사용하기 위해, HandleBars js 라이브러리를 다운로드하고,

<script src="" 를 이용해서 임포트 해주고 사용해야 한다. 이후 설명은 아래 소스코드에서 이어가겠습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<script type="text/javascript" src="/resources/js/handlebars-v4.0.10.js"></script>
<title>Insert title here</title>
</head>

<script id="entry-template" type="text/x-handlebars-template">
	<table>
    	<thead> 
        	<th>이름</th> 
        	<th>아이디</th> 
        	<th>메일주소</th> 
    	</thead> 
    	<tbody> 
       	 	{{#users}} 
       	 	<tr> 
        	    <td>{{name}}</td> 
            	<td>{{id}}</td> 
            
            {{!-- 사용자 정의 헬퍼인 email에 id를 인자로 넘긴다 --}}
            	<td><a href="mailto:{{email id}}">{{email id}}</a></td> 
        	</tr> 
        	{{/users}} 
    	</tbody> 
	</table>
	</script>
	<script>
		// [	handlebars 적용하기	]
	
		//핸들바 템플릿 가져온다.
		var source = $("#entry-template").html(); 
	
		//핸들바 템플릿 컴파일
		var template = Handlebars.compile(source); 
	
		//핸들바 템플릿에 바인딩할 데이터
		var data = {
		    	users: [
		            { name: "홍길동1", id: "aaa1" },
		            { name: "홍길동2", id: "aaa2" },
		            { name: "홍길동3", id: "aaa3" },
		            { name: "홍길동4", id: "aaa4" },
		            { name: "홍길동5", id: "aaa5" }
		        ]
		}; 
	
		//커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
		// 위에서 {{email id}} 에서 email부분에 id를 인자로 넘기게 되는 것!
		// 그럼 id@daum.net을 반환해서 들어가게 됨.
		Handlebars.registerHelper('email', function (id) {
		  return id + "@daum.net";
		});
	
		//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
		var html = template(data);
	
		//생성된 HTML을 DOM에 주입
		$('body').append(html);
	</script>

저작자표시 비영리

'개발 > 스프링' 카테고리의 다른 글

AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 (0)	2017.05.31
AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제) (0)	2017.05.31
sitemesh 추가하기 (0)	2017.05.11
게시글 페이징 처리하기(페이지 처리 쪽 처리) (11)	2017.05.07
스프링 환경설정 (2)	2017.05.06

악덕고용주의 개발 일기

handlebars js 라이브러리를 이용한 View 표현하기

'개발 > 스프링' 카테고리의 다른 글

+ Recent posts

티스토리툴바