Handlebars 예제 #6

lookup

by Jaeha Ahn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.2/handlebars.min.js"></script>
<!-- 핸들바 템플릿 -->
<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>

JavaScript

//핸들바 템플릿 가져오기
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);