SPA를 작성하게 되면 클라이언트 사이드의 템플릿엔진을 사용하게 된다. 많은 템플릿 엔진이 나와 있고 이중 핸들바에 대해서 알아보자
1) Handlebar.js 소개
- 클라이언트 사이드 템플릿 엔진 성능 비교에서 핸들바의 위치
- 핸들바의 동작방식 소개 동영상
2) 핸들바 템플릿 만들기
- 핸들바 스크립트 최신 다운로드 받고 <script> 코드 넣기 (jQuery 기본으로 넣음)
<html>
<body>
<script src="jquery.js"></script>
<script src="handlebar.js"></script>
</body>
</html>
- 템플릿 코드 작성하기
+ <script> 테그를 사용하면 화면에 렌더링되지 않음
+ handlebar.js 가 사용하는 type임을 x-handlebars-template 명칭으로 준다
+ 컬렉션의 루프틑 # 으로 시작해서 / 로 끝남 == Code Less
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
- jQuery를 이용하여 템플릿 핸들링하기
<script>
// 템플릿 해석
var source = $("#some-template").html();
var template = Handlebars.compile(source);
// 데이터
var data = { users: [
{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]};
// div id=content-placeholder 에 결과 내역을 렌더링한다
$("#content-placeholder").html(template(data));
</script>
- template 변수가 참조하는 펑션 내용
function (context, options) {
if (!compiled) {
compiled = compile();
}
return compiled.call(this, context, options);
}
- content-placeholder div 태그 넣기 (<script> 태그보다 위에 놓는다)
<html>
<body>
<div id="content-placeholder"></div>
<script src="jquery.js"></script>
<script src="handlebar.js"></script>
.. 중략 ..
- 전체 소스 코드
- 결과 화면
4) 클라이언트 사이드 템플릿 엔진
- Mustache -> Handlebar -> JsRender 순서로 발전해 왔음
- JsRender : MS가 차기 Office 에 공식 채택한 템플릿 엔진
** 테스트 소스
handlebar.zip<참조>
'Backbone.js' 카테고리의 다른 글
| [Backbone.js] 서점 샘플 응용하기 - 03 (AMD 모듈화 하기) (0) | 2013.03.18 |
|---|---|
| [Backbone.js] RequireJS를 통한 브라우져상의 모듈화 (0) | 2013.03.16 |
| [Backbone.js] 서점 샘플 응용하기 - 02 (MongoDB 연결하기) (0) | 2013.03.15 |
| [Backbone.js] 서점 샘플 응용하기 - 01 (0) | 2013.03.15 |
| [Backbone.js] 큰 규모의 SPA 개발을 위한 준비 (0) | 2013.03.12 |