Handlebars 예제

by Kim Ara

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<!-- 핸들바 템플릿 -->
<script id="partial-template" type="text/x-handlebars-template">
    {{!-- #unless 헬퍼는 #if 의 정반대 기능을 한다. --}}
    <h1>{{title}} 리스트 {{#unless users}}<small>사용자 리스트가 없습니다.</small>{{/unless}}</h1>
</script>

<!-- 핸들바 템플릿 -->
<script id="entry-template" type="text/x-handlebars-template">
	{{!-- 
		조각 템플릿은 #> 를 사용해서 포함시킬 수 있다.
	  또, 해당 조각 템플릿에 특정 변수값을 전달할 수 있다. (예: title="사용자")
	  
	  partial template 로그 실패시 보여질 내용을 따로 지정하지 않는다면,
	  #> 이 아니라 > 만 사용해도 된다.
	--}}
	{{#> commonHeader title="사용자"}}
		partial template 로드 실패시 보여지는 내용
	{{/commonHeader}}

	{{!--
		인라인 조각 템플릿은 따로 등록할 필요가 없이 바로 사용 가능하다.
	--}}

	{{#* inline "last"}}
		{{#if @last}}
	  (이게 마지막이네 ㅠㅠ)
	  {{/if}}
	{{/inline}}

	<table>
		<thead> 
			<th>이름</th> 
			<th>아이디</th> 
			<th>메일주소</th> 
			<th>요소정보</th>
		</thead> 
		<tbody> 
			{{!-- {{#each users}} 는 {{#users}} 로도 대체 가능하다 --}}
			{{#each users}} 
			<tr> 
				<td>{{name}} {{> last}}</td> 
				<td>{{id}}</td> 
				
				{{!-- 사용자 정의 헬퍼인 email에 id를 인자로 넘긴다 --}}
				<td><a href="mailto:{{email id}}">{{email id}}</a></td> 
				
				{{!-- 요소의 순번은 @index 혹은 @key로 잡을 수 있는데,
				array와 object 모두 잡을 수 있는 key가 더 나아보인다 --}}
				
				{{#if @first}}
					<td>첫 아이템 ({{@key}} 번째 요소)</td>
				{{else if @last}}
					<td>마지막 아이템 ({{@key}} 번째 요소)</td>
				{{else}}
					<td>중간 아이템 ({{@key}} 번째 요소)</td>
				{{/if}}
			</tr> 
			{{/each}}
		</tbody> 
	</table>
</script>

JavaScript

//핸들바 조각 템플릿 가져오기
var partial = $("#partial-template").html();

//핸들바 템플릿 가져오기
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" }
        ]
}; 

//조각 템플릿을 'commonHeader' 라는 이름으로 등록
Handlebars.registerPartial('commonHeader', partial);

//커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
Handlebars.registerHelper('email', function (id) {
  return id + "@daum.net";
});

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
var html = template(data);

//생성된 HTML을 DOM에 주입
$('body').append(html);