[    HandleBars 적용하기    ]

: HandleBars는 Javascript 라이브러리 중 하나로, 보통 AJAX로 가져온 데이터를 JQuery에서 문자열로 조합한다음에 append해주는

  불편함을 줄여주기 위해 주로 사용됩니다.

  특징)

1. 태그를 이용해서 구성을 잡아준다.(템플릿을 만든다.)
2. 템플릿 사이사이에 데이터가 들어갈 곳에 {{ 변수 }} 로 넣어놓는다.
3. 템플릿과 데이터를 연결시 {{}} 부분에 데이터가 들어가게 된다.

이때, {{#변수}} {{/변수}} 부분에는 배열과 같은 타입의 데이터의 길이가 들어와 그 길이만큼 반복작업을 수행하게 된다.

제일먼저 사용하기 위해, HandleBars js 라이브러리를 다운로드하고, 

<script src="" 를 이용해서 임포트 해주고 사용해야 한다. 이후 설명은 아래 소스코드에서 이어가겠습니다.


?
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<!--
handlebars js 라이브러리 추가
 -->
<script type="text/javascript" src="/resources/js/handlebars-v4.0.10.js"></script>
<title>Insert title here</title>
</head>
 
    <!--
        handlebars 템플릿 작성
        : script내부에 type을 text/x-handlebars-X 식으로 작성한다. X부분에는 자신이 원하는 명칭을 넣을 수 있다.
        ex) type="text/x-handlebars-myTemplate"
        handlebars의 요점)
            1. handlebars는 태그를 이용한 템플릿을 구성하고
            2. 그 템플릿에 들어갈 데이터를 구성하고
            3. 마지막으로 데이터를 템플릿에 적용한다.
            이때, 템플릿에 데이터가 들어갈 자리에는 {{ }} 이 안에 변수명을 표시해주게 된다.
             
            아래의 템플릿에서 {{#users}} {{/users}} 부분은 : users 배열과 같은 객체의 길이가 들어와 해당 길이만큼 반복문을 돌게된다.
            예를들어 users={{name:'abc',id:'sooingkr'},{name:'ccc',id:'ddd'}}; 라는 users 배열이 있으면 2번 돌면서 찍게된다.
             
            {{#users}} {{/users}} 내부에 {{name}}, {{id}} 부분에는 users 배열의 각 인덱스가 가리키는 변수명을 기재해주면 된다.
     -->
    <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>
    <script>
        // [    handlebars 적용하기 ]
     
        //핸들바 템플릿 가져온다.
        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" }
                ]
        };
     
        //커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
        // 위에서 {{email id}} 에서 email부분에 id를 인자로 넘기게 되는 것!
        // 그럼 id@daum.net을 반환해서 들어가게 됨.
        Handlebars.registerHelper('email', function (id) {
          return id + "@daum.net";
        });
     
        //핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
        var html = template(data);
     
        //생성된 HTML을 DOM에 주입
        $('body').append(html);
    </script>


저작자표시 비영리

'개발 > 스프링' 카테고리의 다른 글

AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리  (0) 2017.05.31
AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제)  (0) 2017.05.31
sitemesh 추가하기  (0) 2017.05.11
게시글 페이징 처리하기(페이지 처리 쪽 처리)  (11) 2017.05.07
스프링 환경설정  (2) 2017.05.06

+ Recent posts

티스토리툴바