[HandlebarJS] 개념 및 사용법

개념

HandlebarJS는 Mustache를 기초로 개발된 클라이언트 템플릿 엔진이다. HandlebarJS는 중괄호({{}})를 이용를 이용하며 사용자 정의 함수인 헬퍼 개념을 도입시켜 데이터를 자유롭게 컨트롤 할 수 있다. 

사용법

1. handlerbarJS 사이트에서 해당 handlebar.js를 다운로드 받는다. 

HandlebarJS 공식사이트 http://handlebarsjs.com/

2. 스크립트를 해당 html 파일에서 불러온다.

- {{name}} 등과 같이 중첩 중괄호 안에 사용자 정의 함수를 넣는다.

예제

    <script id="dummyData" type="text/x-handlebars-template">
    <div>
        <h1>과일</h1>
        <dl>
            <dt>사과</dt>
            <dd>Apple</dd>
            <dd>red</dd>
        </dl>
    </div>
    </script>
 

위의 소스에 handlebar를 이용하여 데이터를 넣어본다. 

기본적으로 handlebar 템플릿을 이용할 경우에는 위의 소스와 같이 script 태그 안에 HTML 태그들을 넣어준 후, type 을 text/x-handlebars-template으로 선언을 해줘야 한다.

    <script id="dummyData" type="text/x-handlebars-template">
    <div>
        <h1>과일</h1>
        <dl>
            {{#items}}
            <dt>{{title}}</dt>
            <dd>{{english}}</dd>
            <dd>{{color}}</dd>
            {{/#items}}
        </dl>
    </div>
    </script>
 

그 후, 데이터를 입힐 부분들의 치환코드를 {{ }}  안에 넣어준다.  해당은 handlebar 템플릿에 담겨질 데이터이다.

    <script type="text/javascript">
        var data = {
            items:[
                {title:"사과", english:"Apple", color:"red"},
                {title:"바나나", english:"Banana", color:"yellow"},
                {title:"멜론", english:"Melon", color:"green"},
                {title:"포도", english:"grape", color:"purple"}
            ]
        }
    </script>

최종 코드는 아래와 같다.

<script id="dummyData" type="text/x-handlebars-template">
    <div>
        <h1>과일</h1>
        {{#items}}
        <dl>
            <dt>{{title}}</dt>
            <dd>{{english}}</dd>
            <dd>{{color}}</dd>
        </dl>
        {{/items}}
    </div>
    </script>
    <script type="text/javascript">
        // 변수명 dummy에 handlebar 템플릿 구조를 담는다.
        var dummy = $("#dummyData").html();
        //handlebar 템플릿에 템플릿 구조를 컴파일 시킨다.
        var template = Handlebars.compile(dummy);
        //handlebar 에 주입하게 될 데이터
        var data = {
            items:[
                {title:"사과", english:"Apple", color:"red"},
                {title:"바나나", english:"Banana", color:"yellow"},
                {title:"멜론", english:"Melon", color:"green"},
                {title:"포도", english:"grape", color:"purple"}
            ]
        }
        var item = template(data);
        $('body').append(item);
    </script>