Handlebars  코딩 해보기

 

1)    기본적인 구조를 통해 이해

 

Handlebar 템플릿은 아래처럼 script태그 안에 type을 “text/x-handlebars-template” 등으로 설정하고 위치시킨다. 그리고 템플릿 안 구조에 {{ }}로 감싸진 부분이 데이터가 binding되는 부분이다.

{{#users}} 와 {{/users}} 안에 들어있는 html 태그들은 items라는 배열의 길이만큼 반복하게 된다. 그리고 그 내부의 {{name}},{{id}},{{email}}은 배열 요소 객체의 name,id,email 속성값이 바인딩 된다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<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>

Colored by Color Scripter

cs

 

실제 템플릿과의 바인딩은 자바스크립트를 통해서 이루어진다. 아래는 자바스크립트를 통해 Binding하는 코드이다.

아래 코드를 보면 먼저 앞에서 작성한 Handlebar Template의 내용을 가져온다. Handlebars.compile 메소드를 통해 Template을 컴파일한 뒤, 리턴 된 함수의 Parameter에 바인딩할 데이터를 Parameter로 넣으면 데이터가 Binding된 HTML Template이 리턴된다. 이 HTML Template을 DOM에 추가하면 끝난다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//핸들바 템플릿 가져오기

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);

Colored by Color Scripter

cs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//Handlebar 템플릿을 가져오기

var source = $("#entry-template").html();

//Handlebar 템플릿을 precompile

var template = Handlebars.compile(source);

//Handlebar 템플릿에 바인딩할 데이터

var data = {

items:[

{name: "shoes", price:"5000", intro:"www.a.com"},

{name: "T-shirt", price:"1000", intro:"www.b.com"},

{name: "Jeans", price:"2000", intro:"www.c.com"}

]

};

//Handlebar 템플릿에 데이터를 바인딩해서 HTML을 생성

var itemList = template(data);

//생성된 HTML을 DOM에 주입

$('body').append(itemList);

cs

 

아래와 같은 결과가 출력된다.

 

1

2

3

4

5

6

이름    아이디    메일주소

홍길동1    aaa1    aaa1@gmail.com

홍길동2    aaa2    aaa2@gmail.com

홍길동3    aaa3    aaa3@gmail.com

홍길동4    aaa4    aaa4@gmail.com

홍길동5    aaa5    aaa5@gmail.com

cs

 

 

참고로 링크 부분의 malito는 저 링크를 클릭했을 때 바로 전자메일을 보낼 수 있게 해주는 태그이다.

 

코드를 통해 알 수 있듯이 실제 템플릿이 데이터를 컴파일하고, 바인딩해주는 부분이 모두 자바스크립트 코드에서 이루어진다. Handlebars.compile 메서드를 이용해 템플릿을 컴파일하고, 리턴 된 함수의 Parameter에 Binding된 데이터를 Parameter로 넣으면 Binding된 HTML템플릿이 리턴 된다. 그리고 이 HTML템플릿을 DOM에 추가함으로써 구현이 완료된다.

 

 

2)    사용자 정의 Helper 사용해보기

 

Handlebar가 Mustache를 기초로 개발되었지만, Mustache와의 차별 점은 바로 사용자 정의 Helper이다. Mustache는 단순하게 주입된 데이터를 바인딩해주는 템플릿 엔진이었다면 Handlebar는 if, unless 등의 기본 Helper뿐만 아니라 사용자 정의 Helper를 추가해서 좀 더 템플릿 엔진에서 간단한 로직을 포함시킬 수 있다는 것이다. 아래는 기본적인 사용자 정의 Helper예시이다.

 

1

2

{{!-- 사용자 정의 Helper인 email에 id를 인자로 넘긴다 --}}

<td><a href="mailto:{{email id}}">{{email id}}</a></td>

cs

 

앞의 예시에서 HTML코드에서  email라고만 되었던 부분에 {{email id}} 형태로 바뀌고, id를 Parameter를 전달해주고 있다. 즉, email이라는 이름의 사용자 정의 Helper가 사용되고 있는걸 알 수 있다. 이를 해석하면 email이라는 이름의 사용자 정의 Helper를 호출하면서 Parameter로 id 값을 전달한다는 의미이다.

전체 코드를 보면 아래와 같다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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>

Colored by Color Scripter

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

//핸들바 템플릿 컴파일

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를 인자로 받아서 전체 이메일 주소를 반환)

Handlebars.registerHelper('email', function (id) {

  return id + "@daum.net";

});

 

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성

var html = template(data);

 

//생성된 HTML을 DOM에 주입

$('body').append(html);

cs

 

스크립트 부분을 보면 Binding할 데이터에 email이 없는걸 확인할 수 있다. 그 대신 Custom Helper가 등록하는 코드가 구현되고 있는걸 확인할 수 있다. Handlebars.registerHelper라는 메소드를 사용하여 사용자 정의 Helper를 등록하고 있다. 첫번째 Parameter로 Helper의 이름을 넣고, 두 번째 Parameter에서 Helper의 동작을 정의한다. 위 코드에서는 id을 인자로 받아서 ‘@daum.net’이라는 문자열을 더해주는 로직이다.  

결과는 아래와 같다.

 

1

2

3

4

5

6

7

 

이름    아이디    메일주소

홍길동1    aaa1    aaa1@daum.net

홍길동2    aaa2    aaa2@daum.net

홍길동3    aaa3    aaa3@daum.net

홍길동4    aaa4    aaa4@daum.net

홍길동5    aaa5    aaa5@daum.net

cs

 

 

3)    Handlebar에서 제공하는 기본 Helper

 

Handlebar는 if, unless 등의 기본 Helper와 사용자 정의 Helper를 이용해서 간단한 로직을 구현할 수 있다. 하지만 if의 경우 오직 true/false만 판별할 수 있기 때문에 복잡한 조건은 Handlebar를 통해서 처리할 수 없다. 사용자 정의 helper를 통해 가능하지만, Temple에 로직을 배제하는 사상과 맞지 않기 때문에 가능하면 사용하지 않는게 좋다.

그럼 Handlebars에서 제공하는 기본 Helper를 알아보자

 

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

30

31

32

33

34

<script id="entry-template" type="text/x-handlebars-template">

<table>

    <thead> 

        <th>이름</th> 

        <th>아이디</th> 

        <th>메일주소</th>

        <th>요소정보</th>

    </thead> 

    <tbody> 

        {{!-- {{#each users}} 는 {{#users}} 로도 대체 가능하다 --}}

        {{#each users}}

        <tr>

            {{!-- {{name}} 은 {{this.name}} 과 같고 {{.}} 은 현재 name과 id를 포함하고 있는 오브젝트를 가리킨다 --}}

            <td>{{name}}</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>

Colored by Color Scripter

cs

 

 

배열 등을 반복해주는 each Helper의 경우에는 #배열명으로 대체가 가능하다. @기호와 함께 몇 번째 인덱스인지도 구분이 가능하다. @first로 첫번째 인덱스를 알 수 있고, @last로 마지막 인덱스를 확인할 수 있다. 또한 해당 인덱스가 몇 번째 인덱스인지, 오브젝트라면 어떤 오브젝트인지 @key를 통해 알 수 있다. 앞에서 설명했듯이 if는 true/false 만 판별이 가능하며, else와 else if 를 지원하며, unless 는 if의 반대되는 Helper이다.

 

 

4)    partial template 등록 및 사용

 

다른 템플릿엔진처럼 Handlebar도 Handlebar 템플릿을 다른 Handlebar 템플릿의 일부로 포함시킬 수 잇다. 이를 통해 템플릿의 재 사용성과 가독성을 높일 수 있고, 좀 더 객체지향적인 프로그래밍이 가능하다.

 

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<!-- 핸들바 템플릿 -->

<script id="partial-template" type="text/x-handlebars-template">

    {{!-- #unless 헬퍼는 #if 의 정반대 기능을 한다. --}}

    <h1>리스트 {{#unless users}}<small>사용자 리스트가 없습니다.</small>{{/unless}}</h1>

</script>

 

<!-- 핸들바 템플릿 -->

<script id="entry-template" type="text/x-handlebars-template">

 

{{!-- 조각 템플릿은 #> 를 사용해서 포함시킬 수 있다. --}}

{{#> commonHeader}}

    partial template 로드 실패시 보여지는 내용

{{/commonHeader}}

 

<table>

    <thead> 

        <th>이름</th> 

        <th>아이디</th> 

        <th>메일주소</th> 

        <th>요소정보</th>

    </thead> 

    <tbody> 

        {{!-- {{#each users}} 는 {{#users}} 로도 대체 가능하다 --}}

        {{#each users}} 

        <tr> 

            <td>{{name}}</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>

Colored by Color Scripter

cs

 

위의 예를 보면, 앞서 나온 예제와는 다른 부분이 있다. Template을 담고 있는 Script 태그가 한 개 더 있다.

 

1

2

3

4

<script id="partial-template" type="text/x-handlebars-template">

{{!-- #unless 헬퍼는 #if 의 정반대 기능을 한다. --}}

<h1>리스트 {{#unless users}}<small>사용자 리스트가 없습니다.</small>{{/unless}}</h1>

</script>

Colored by Color Scripter

cs

 

Entry-template 안을 잘 보면, #> 기호와 함께 partial template을 삽입해 주는 부분을 발견 할 수 있다. 이는 #>와 함께 partial template의 이름을 넣어주면 해당 위치에 partial template이 삽입된다. partial template의 이름은 자바스크립트에서 등록한다.

 

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

//핸들바 템플릿 컴파일

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);

cs

 

위 코드를 보면, entry-template 과 마찬가지로 partial-template을 가져온 뒤, Handlebars.registerPartial 메소드를 사용해서 가져온 Template을 commonHeader라는 이름으로 등록해주고 있는 것을 확인할 수 있다. 이렇게 등록만 해주면 데이터를 Binding해주는 시점에서 partial template을 삽입해주게 되고, partial template에도 주어진 데이터와 Binding될 부분이 있다면 데이터 Binding역시 처리되게 된다.

 

 

5)    with와 as 그리고 상대 경로 참조


지금까지 살펴본 내용들은 기본적인 Handlebars의 문법이었다면, 이런 문법을 조합한 좀더 복잡한 구조를 살펴보자. 자주 있는 상황은 아니지만, 이중 혹은 삼중의 Loop을 돌리는 상황에서 상위 Loop의 값을 하위 Loop에서 참조해야 하는 상황에서 활용할 수 있다.

 

 

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

30

31

32

33

34

35

36

37

38

<!-- 핸들바 템플릿 -->

<script id="entry-template" type="text/x-handlebars-template">

 

    <table>

        <thead> 

            <th>이름</th> 

            <th>아이디</th> 

            <th>취미</th>

        </thead> 

        <tbody> 

            {{!-- {{#each users}} 는 {{#users}} 로도 대체 가능하다 --}}

            {{#each users as |user userId|}} 

                <tr> 

                    <td>{{name}}</td> 

                    <td>{{id}}</td> 

                    <td>

                      {{#each hobbys as |hobby hobbyId|}}

                        {{!-- 처음이 아닌 경우에는 쉼표(,) 넣기 --}}

                        {{#unless @first}}, {{/unless}}

 

                                                {{!-- 상위 이터레이션의 인덱스 넘버를 가져올 때 --}}

                                                {{@../index}} ==

                        {{!-- 상위 이터레이션의 인덱스 넘버는 아래와 같은 방식도 가능하다 --}}

                        {{userId}}

 

                        {{!-- 상대경로로 참조한 name 을 myName 이라는 변수로 할당 --}}

                        {{#with ../this.name as |myName|}}

                          {{!-- 상대경로를 참조해서 #hobby의 현재값 출력 --}}

                          {{myName}} 의 {{hobbyId}}번 취미 {{hobby}}

                        {{/with}}

                      {{/each}}

                    </td>

                </tr> 

            {{/each}}

        </tbody> 

    </table>

 

</script>

Colored by Color Scripter

cs

 

../ 를 사용해서 상위의 경로를 참조할 수 있고, with 와 as 를 활용해서 이렇게 참조한 상위의 값을 다른 이름으로 할당해서 사용하고 있다.

상위 Loop에서 참조하고 있는 user 에 item에 있는 name 을 myName으로 할당하여 활용하고 있다. 그리고 상대 경로를 참조하여 hobby의 값도 출력해주고 있다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//핸들바 템플릿 가져오기

var source = $("#entry-template").html();

 

//핸들바 템플릿 컴파일

var template = Handlebars.compile(source); 

 

//핸들바 템플릿에 바인딩할 데이터

var data = {

        users: [

            { name: "홍길동", id: "aaa", hobbys: ['축구', '야구', '농구'] },

            { name: "이순신", id: "bbb", hobbys: ['족구', '피구', '탁구'] },

            { name: "이성계", id: "ccc", hobbys: ['수구', '배구', '농구'] },

            { name: "장영실", id: "ddd", hobbys: ['축구', '피구', '농구'] },

            { name: "장보고", id: "eee", hobbys: ['배구', '야구', '족구'] }

        ]

}; 

 

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성

var html = template(data);

 

//생성된 HTML을 DOM에 주입

$('body').append(html);

Colored by Color Scripter

cs

 

결과는 아래와 같다.

1

2

3

4

5

6

이름    아이디    취미

홍길동    aaa    0 == 0 홍길동 의 0번 취미 축구 , 0 == 0 홍길동 의 1번 취미 야구 , 0 == 0 홍길동 의 2번 취미 농구

이순신    bbb    1 == 1 이순신 의 0번 취미 족구 , 1 == 1 이순신 의 1번 취미 피구 , 1 == 1 이순신 의 2번 취미 탁구

이성계    ccc    2 == 2 이성계 의 0번 취미 수구 , 2 == 2 이성계 의 1번 취미 배구 , 2 == 2 이성계 의 2번 취미 농구

장영실    ddd    3 == 3 장영실 의 0번 취미 축구 , 3 == 3 장영실 의 1번 취미 피구 , 3 == 3 장영실 의 2번 취미 농구

장보고    eee    4 == 4 장보고 의 0번 취미 배구 , 4 == 4 장보고 의 1번 취미 야구 , 4 == 4 장보고 의 2번 취미 족구

cs

 

 

6)    lookup을 활용한 변수 참조


 lookup Helper를 활용하면 특정 상대 경로에 있는 변수 값을 참조할 수 있다. lookup Helper로 참조할 수 있는 변수 값은 with 와 as 를 활용하는 방법으로 거의 대부분 참조 가능하다. 개인적으로는 with 와 as 를 활용하는 것이 더 명시적이기 때문에 선호한다.

 

 

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

30

31

32

<!-- 핸들바 템플릿 -->

<script id="entry-template" type="text/x-handlebars-template">

 

    <table>

        <thead> 

            <th>이름</th> 

            <th>아이디</th> 

            <th>취미</th>

        </thead> 

        <tbody> 

            {{!-- {{#each users}} 는 {{#users}} 로도 대체 가능하다 --}}

            {{#each users as |user userId|}} 

                <tr> 

                    <td>{{name}}</td> 

                    <td>{{id}}</td> 

                    <td>

                      {{#each hobbys as |hobby hobbyId|}}

                          {{!-- 

                                                    상대경로를 참조해서 상위 이터레이션의 name 값을 가져오는 것은

                          with 헬퍼를 사용해서 {{#with ../this.name as |myName|}}

                          와 같이 처리해줄 수도 있고 아래와 같이

                                                    lookup을 활용해서 처리해줄 수도 있다.

                                                --}}

                        {{lookup ../this "name"}} 의 {{hobbyId}}번 취미 {{hobby}}

                      {{/each}}

                    </td>

                </tr> 

            {{/each}}

        </tbody> 

    </table>

 

</script>

Colored by Color Scripter

cs

 

Lookup을 통해 상대 경로에  name값을 찾아서 출력해주고 있다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//핸들바 템플릿 가져오기

var source = $("#entry-template").html();

 

//핸들바 템플릿 컴파일

var template = Handlebars.compile(source); 

 

//핸들바 템플릿에 바인딩할 데이터

var data = {

        users: [

            { name: "홍길동", id: "aaa", hobbys: ['축구', '야구', '농구'] },

            { name: "이순신", id: "bbb", hobbys: ['족구', '피구', '탁구'] },

            { name: "이성계", id: "ccc", hobbys: ['수구', '배구', '농구'] },

            { name: "장영실", id: "ddd", hobbys: ['축구', '피구', '농구'] },

            { name: "장보고", id: "eee", hobbys: ['배구', '야구', '족구'] }

        ]

}; 

 

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성

var html = template(data);

 

//생성된 HTML을 DOM에 주입

$('body').append(html);

Colored by Color Scripter

cs

 

 

1

2

3

4

5

6

이름    아이디    취미

홍길동    aaa    홍길동 의 0번 취미 축구 홍길동 의 1번 취미 야구 홍길동 의 2번 취미 농구

이순신    bbb    이순신 의 0번 취미 족구 이순신 의 1번 취미 피구 이순신 의 2번 취미 탁구

이성계    ccc    이성계 의 0번 취미 수구 이성계 의 1번 취미 배구 이성계 의 2번 취미 농구

장영실    ddd    장영실 의 0번 취미 축구 장영실 의 1번 취미 피구 장영실 의 2번 취미 농구

장보고    eee    장보고 의 0번 취미 배구 장보고 의 1번 취미 야구 장보고 의 2번 취미 족구

cs

 

 

2.    Handlebar의 장점

 

  • precompile할 수 있기 때문에 성능개선에 도움이 된다.

  • Helper를 자유롭게 추가할 수 있다.

  • JADE와 같은 문법에 비해 친숙하면서도 가독성이 높다.

  • Grunt 등으로 빌드 자동화에 precompile 과정을 포함시키기 쉽다.

  • 템플릿에는 로직 코드를 넣지 않는 것이 일반적이다.

    • 컴파일한 템플릿에서 오류가 발생했을 때 디버깅도 어렵다.

    • 실제 문법에서도 간단한 분기문, 배열, 반복문 정도를 지원한다.

 


 

참고사이트

 

페이지: http://handlebarsjs.com/

깃허브: https://github.com/wycats/handlebars.js/

http://ohgyun.com/427

http://sailboat-d.tistory.com/40

http://jojoldu.tistory.com/23

http://tmondev.blog.me/220398995882

http://programmingsummaries.tistory.com/381

https://blog.outsider.ne.kr/939

http://aroundck.tistory.com/957

http://uncle-bae.blogspot.kr/2016/06/handlebars-expression.html


저작자표시

'IT > Handlebar' 카테고리의 다른 글

Handlebar란  (0) 2017.01.12



1.    Handlebar.js란


Handlebar.js(이하 Handlebar)는 자바스크립트의 템플릿 엔진 중 하나이다. 먼저 템플릿 엔진이라 하면 프로그램 로직과 프레젠테이션 계층을 분리하기위한 수단이다.  Mustache를 기반으로 구현한 템플릿 인자, 여기서 Mustache는 콧수염모양의 {{ }} Bracket을 이용하여 data를 표현하는 것을 의미한다. 이를 이용하면 html페이지에서 HTML+Bracket의 구성으로 디자이너와 개발자가 협업할 때도 디자이너에게도 이해하기 쉬운 구조로써 협업을 하는데도 도움이 된다.

 

 

2.    기본 사용방법


표현식


  • {{title}} 과 같은 형태로 표현되며, 현재 Context에서 title이라는 Property를 찾아서 대체하는 의미이다.

  • {{section.title}} 과 같은 형태로 dot(.)으로 분리된 경로 탐색도 가능하다. 현재 Context에서 section을 찾고, title 속성을 찾아서 대체하는 의미이다.

  • {{section/title}} 과 같이 / 문법을 사용할 수 있다. 식별자는 아래 열거된 UniCode를 제외하고 모두 사용 가능하다.

    • Whitespace ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

  • 배열 접근 표현식을 통해 Property에 접근할 수 있다. section 배열의 3번째 titles 의 모든 property 를 context 로 갖으면서 subject 와 body 에 접근한다.

1

2

3

4

5

6

{{#each section.[3].titles}}

  <h1>{{subject}}</h1>

  <div>

    {{body}}

  </div>

{{/each}}

cs


  • {{! }} 블록으로 주석을 추가할 수 있다.

  • {{log}} 블록으로 템플릿 출력 시 로깅할 수 있다.

  • {{{body}}} HTML요소는 자동으로 이스케이프 시켜준다.

 

Helper


  • Helper는 기본적으로 다른 개발 언어의 함수라고 볼 수 있다.

  • 기본 문법은 아래와 같다.

 

1

{{{ Helper_Name param1 parm2 ... }}}

cs

  • Handlebars의 Helper Call은 단순한 식별자이며, 0개 이상의 Parameter를 받을 수 있다. 그리고 구분은 공백으로 한다. 나누게 된다.  Handlesbars는 위에 설명한 표현식과 완전히 동일한 방법으로 사용된다.

  • 반복과 같은 다른 템플릿엔진에서 제공하는 Helper가 존재한다.

 

1

2

3

{{#each userlist}}

{{user}}

{{/each}}

cs

 

아래 코드는 link라는 Helper에 story라는 Parameter를 넣어 실행시킨 결과를 출력하라는 의미이다.

 

1

{{{link story}}}

cs

 

link helper 는 Handlebars.registerHelper(Helper_Name, function ) 으로 등록한다.

 

1

2

3

4

5

Handlebars.registerHelper('link', function(object) {

  return new Handlebars.SafeString(

    "<a href='" + object.url + "'>" + object.text + "</a>"

  );

});

Colored by Color Scripter

cs

 

Helper 는 최종 Parameter들로 key-value pair hash 를 전달할 수도 있다.

 

1

{{{link "See more..." href=story.url class="story"}}}

cs

 

이럴 경우 Helper 함수에서는 hash 부분을 하나의 object 로 받아서, object.hash 로 접근하여 key-value pair 에 대한 context를 얻을 수 있다.

 

1

2

3

4

5

6

7

8

9

10

11

Handlebars.registerHelper('link', function(text, options) {

  var attrs = [];

 

  for(var prop in options.hash) {

    attrs.push(prop + '="' + options.hash[prop] + '"');

  }

 

  return new Handlebars.SafeString(

    "<a " + attrs.join(" ") + ">" + text + "</a>"

  );

});

Colored by Color Scripter

cs

 

Subexpressions


Handlebars 는 subexpression을 제공한다. 이는 단일 mustache를 이용하여 복합 Helper를 호출할 수 있다. 그리고 내부 Helper의 결과를 외부 Helper Parameter로 전달 할 수 있다. Subexpression은 ( )로 구분한다.

1

{{outer-helper (inner-helper 'abc') 'def' }}

cs

 

위 코드에서는 inner-helper는 문자열 'abc'를 받는 Helper로 호출이 되며 이 결과는 outer-helper의 첫번째 Parameter로 전달된다. 그리고 'def'는 두번째 Parameter 로 전달된다.

 

Whitespace Control


템플릿의 공백은 특정 mustache스테이트먼트의 각 부분에서 ~ 문자를 브레이스{의 의해서 생략이 될 수 있다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

{

    nav: [

        {url: 'foo', test: true, title: 'bar'},

        {url: 'bar'}

    ]

}

 

 

{{#each nav ~}}

    <a href="{{url}}">

        {{~#if test}}

            {{~title}}

        {{~^~}}

            Empty

        {{~/if~}}

    </a>

{{~/each}}

Colored by Color Scripter

cs

 

출력 결과 뉴라인과 포매팅된 공백 처리 결과는 아래와 같다.

 

1

<a href="foo">bar</a><a href="bar">Empty</a>

cs

 

이 확장은 라인 처리의 기본적인 동작이며 "standalone" Helper이다.

 

1

2

3

4

5

6

7

8

9

{{#each nav}}

    <a href="{{url}}">

        {{#if test}}

            {{title}}

        {{^}}

            Empty

        {{/if}}

    </a>

{{~/each}}

cs

 

 

결과는 아래와 같다.

 

1

2

3

4

5

6

<a href="foo">

    bar

</a>

<a href="bar">

    Empty

</a>

cs

 

 

 

Escaping


Handlebars컨텐츠는 하나 혹은 두개의 방법으로 이스케이프 될 수 있다. 이는 인라인 이스케이프 혹은 raw block helpers이다. 인라인 escape는 prefixing mustache블록으로 \으로 시작하는 블록이다. Raw block은 {{{{ mustache 브레이스로 생성된다.

 

1

2

3

4

\{{escaped}}

{{{{raw}}}}

    {{escaped}}

{{{{/raw}}}}

cs



 

참고사이트

 

페이지: http://handlebarsjs.com/

깃허브: https://github.com/wycats/handlebars.js/

http://ohgyun.com/427

http://sailboat-d.tistory.com/40

http://jojoldu.tistory.com/23

http://tmondev.blog.me/220398995882

http://programmingsummaries.tistory.com/381

https://blog.outsider.ne.kr/939

http://aroundck.tistory.com/957

http://uncle-bae.blogspot.kr/2016/06/handlebars-expression.html

 

저작자표시

'IT > Handlebar' 카테고리의 다른 글

Handlebars 코딩 해보기  (0) 2017.01.12

+ Recent posts

티스토리툴바