Handlebars

0. 들어가며...

코드분석을 하던중 생소한 코드가 있어 찾아보았다.
참고한블로그1, 블로그2를 보고 이해하는데 많은 도움을 받았다.

1. Handlebars란?

Mustache를 기반으로 구현한 간단한 templating language라고 한다.(handlebarsjs.com)

홈페이지에서 설명하는 Handlebars의 장점은 다음과 같다.

🔷 Handlebars는 Semantic templates을 구축하는데 필요한 기능을 제공한다.
🔷 Mustache-compatible(호환)하여 Mustache를 핸들바로 교체하고 현재 템플릿을 계속 사용 사용할 수 있다.
🔷 JavaScript함수로 컴파일하기 때문에 다른 템플릿엔진보다 템플릿 실행을더 빠르게 할 수 있다.

핸들바 표현식은 {{ some contents }} 이다.
템플릿이 실행되면 이러한 표현식이 입력 개체의 값으로 바뀐다.
표현식에 사용되는 중괄호{}가 콧수염(Mustache)을 닮았다고 하여 콧수염괄호라고도 한다.

2. 적용해보자!

핸들바 템플릿을 사용하기 위해선 속성으로 템플릿임을 알려줄 필요가 있다.

<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> 
            <td><a href="mailto:{{email}}">{{email}}</a></td> 
        </tr> 
        {{/users}} 
    </tbody> 
</table>
</script>

<script>태그의 type속성을 살펴보면 text/x-handlebars-template을 통해 핸들바 템플릿을 사용한다는 것을 알 수 있다.
더불어, {{#users}}와 {{/users}}로 감싸진 부분은 users라는 배열의 길이만큼 반복된다. {{name}}처럼 내부에 괄호로 감싸진 부분은 배열 요소 값으로 바뀌는 부분이다.

앞서 말했듯이, Handlebars는 자바스크립트함수로 컴파일된다. 예제의 js파일을 살펴보자.

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

//핸들바 템플릿 컴파일
var template = Handlebars.compile(source); 

//핸들바 템플릿에 바인딩할 데이터
var data = {
    	users: [
            { name: "홍길동1", id: "aaa1", email: "aaa1@gmail.com" },
            { name: "홍길동2", id: "aaa2", email: "aaa2@gmail.com" },
            { name: "홍길동3", id: "aaa3", email: "aaa3@gmail.com" },
            { name: "홍길동4", id: "aaa4", email: "aaa4@gmail.com" },
            { name: "홍길동5", id: "aaa5", email: "aaa5@gmail.com" }
        ]
}; 

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

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

id를 통해 핸들바 템플릿을 가져오고, 컴파일이 이루어진다. 변수 html에 파라미터로 데이터를 넣어주고 JQuery로 body끝에 html을 추가하였다.

참고한 블로그1에서 제공한 해당 예제의 실습링크이다.

3. 마치며...

이번 포스팅에서는 Handlebars의 헬퍼에 대해서는 다루지 않았다.
다음 포스팅에서 다룰 수 있게 되기를 바라면서 이만 글을 마치고자 한다.