Martin`s Work

[HandlebarJS] 개념 및 사용법 본문

Javascript/HandlebarJS

[HandlebarJS] 개념 및 사용법

Martin`s Work 2017. 4. 20. 15:38

개념


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


사용법


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


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


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


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


예제


1
2
3
4
5
6
7
8
9
10
11
    <script id="dummyData" type="text/x-handlebars-template">
    <div>
        <h1>과일</h1>
        <dl>
            <dt>사과</dt>
            <dd>Apple</dd>
            <dd>red</dd>
        </dl>
    </div>
    </script>
 
cs

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
    <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>
 
cs


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


1
2
3
4
5
6
7
8
9
10
    <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>
cs


최종 코드는 아래와 같다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>
cs

Comments