1. Handlebars.js
SK planet 한정현
(kazikai84@gmail.com)

2. Table of Contents
• Handlebars ?
• Why Handlebars? (Mustache?)
• Getting Started
• Expression
• Helper
• built-in
• custom
• Comments
• Built-in Utility

3. Handlebars?
• http://handlebarsjs.com/
• https://github.com/wycats/handlebars.js/
• Mustache 템플릿 언어기반으로 만들어진 확장 템플릿
• View 와 Code 를 분리 하기 위해 만들어짐 : 로직 과 presentation 을 분리
• Mustache 템플릿에 Handlebars 확장 기능들을 사용 할수 있음
• Web site보다는 Web app에 더 적합
• 자바스크립트 코드 안에 HTML Element 를 넣지 않기 위해

4. not Handlebars…
var $content = $( '#content' ),
$div = $( '<div class="tab">탭 영역 입니다. </div>' ),
$gnb = $( '<h1 > header 부분 영역입니다. </h1>' ),
$input = $( '<input type="text" placeholder="텍스트" value="1" disalbed>' );
$content.append( $div ).append( $gnb ).prepend( $input );
var $content = $( '#content' ),
$div = $( '<div>' ).addClass('tab').html( '탭 영역입니다. ' ),
$gnb = $( '<h1></h1>' ).html( ' header 부분 영역입니다. '),
$input = $( '<input>' ).attr({
"type" : "text",
"placeholder" : "텍스트"
}).val( "1" ).prop( 'disalbed', true );
$content.append( $div ).append( $gnb ).prepend( $input );
var $content = $( '#content' );
function makeTemplate ( $elem, dContent, gContent ) {
var $div = $( '<div>' ).addClass('tab').html( dContent ),
$gnb = $( '<h1></h1>' ).html( gContent ),
$input = $( '<input>' ).attr({
"type" : "text",
"placeholder" : "텍스트"
}).val( "1" ).prop( 'disalbed', true );
return $elem.append( $div ).append( $gnb ).prepend( $input );
};
makeTemplate( $content, '탭 영역입니다.', 'header 부분 영역입니다.' );
너무 복잡함… JS 안에 html 이 들어가게 되고,
반복적으로 재사용 되는 코드에서는 사용 하기 힘듬 ..
-> 장점으로 jQuery를 많이 써본다..??
jQuery 스타일로 변경도 해보고..
모듈화도 해보지만..

5. Handlebars
<script type="text/x-handlebars-template" id="test3-template">
<input type="text" placeholder="텍스트" value=“{{value}}“ disabled>
<div class="tab">
{{dContent}}
</div>
<h1>{{gContent}}</h1>
</script>
var context3 = {
“value”: 1,
"dContent": "탭 영역입니다. ",
"gContent": "header 부분 영역입니다. "
};
var test3Tmpl = Handlebars.compile( $( '#test3-template' ).html() );
$( '#test3' ).html( test3Tmpl( context3 ) );
Template 을 만들고
JavaScript 에서 data 를 정해서 넣어주고
템플릿을 쓰는게 답이다!!
최종적으로 아래와 같이 보여짐

6. Why Handlebars? (Mustache?)
• handlebars template 은 컴파일 된다.
• #if , #unless, #with, #each 등을 지원
• helper를 추가할 수 있음
• path 구조를 지원 {{#each ../person.name }}
• 5배에서 7배 handlebars가 더 빠름 : https://travis-
ci.org/wycats/handlebars.js/builds/33392182#L538

7. Getting Started
• handlebars.js 파일 include
• 보여질 HTML 코드를 작성하고
• HTML 코드는 변경될 부분 ( 재사용 등에 의해 ) 을 {{}} expression으로 감싸 준다.
• 만들어진 HTML 코드는 다음과 같은 포맷안에 넣어준다.
• 이제 JavaScript 에서 위 Template 을 찾아 compile 한후
• 템플릿 안에 들어갈 Data 를 선언 한후 템플릿에 인자로 넣어준다.
• 마지막으로 나온 html 변수 안에는 HTML 이 들어있으므로, DOM 에 추가해주면 된다.
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
<script type="text/x-handlebars-template" id=“template">
</script>
var source = $( ‘#template’ ).html();
var template = Handlebars.compile( source );
var context = { title : “타이틀” , “body”: “바디” };
var html = template( context ) ;
$(‘body’).append( html );
<div class="entry">
<h1>타이틀</h1>
<div class="body">
바디
</div>
</div>

8. Expression
• 기본 사용 법 <h1>{{title}}</h1>
• 현재 context 안에 title 속성을 표현 하고 싶을 경우 {{ title.text }}( dot 사용 가능 )
• {{ title/text }} ( / 도 사용 가능 dot 와 같다. ) {{ this.title.text }} , {{ ./title.text }} 도 동일
• ../ 도 사용 가능 ( 부모 context에 접근 하려면 필요 )
• HTML 문법이 Data에 있으면,해당 HTML 문법도 표시
• {{{ expressions }}} 를 사용하면, 자동으로 없어짐
• Whitespace Control 를 하려면 expression 앞에 ~ 를 붙히면 된다.

9. Helper: Built -in
• with : 템플릿에서 context 이동시에 사용
• each : 배열 형태 또는 object 형태의 context 에서 사용 : else는 데이터가 없을 경우
• each : @key , @index 를 키 값과 index 값을 표시 할수있음

10. Helper: Built -in
• if : context 의 조건에 따라 사용
• if 는 해당 argument 가 falsy 일때 ( false, undefined, null, “” , [] ) 일때 동작 하지 않는다.
• else 와 같이 주로 같이 사용 됨
• unless : if helper 의 반대 개념으로 값이 falsy 일때 렌더링 된다.
• log : 템플릿이 실행 되는 동안 컨텍스트를 로깅 하기 위해 사용 : {{log “look”}}

11. Helpers: Custom
• 기본 helper 를 제외 하고 다른 동작을 하는 helper 를 만들수 있음
• Handlebars.registerHelper() 를 사용
• registerHelper의 return 값은 자동으로 escape 처리가 됨 :
• escape 는 http://www.freeformatter.com/html-escape.html 참조
• escape 처리를 안하고 싶다면, return 하기전 new Handlebars.SafeString( [return value] ); 해주고 return을
해주면 된다. ]
• 헬퍼 다음 인자로 넣어주는 값들은 helper의 변수가 된다 ( 순서에 따라..)

12. Helpers: Custom
• Hash Arguments
• custom helper 를 만들때 여러가지 조건 값들을 사용 할수 있음
• key = value 로 넣은 인자들은 options.hash.key = value 로 저장되어있음
• hash 는 마지막 인자로 넣어주어야 한다.
•

13. Comments
• {{! }} or {{!-- --}} 를 사용
• HTML 내에서 주석 처리 할때 사용 위 2 포맷 모두 사용 가능.
• 해당 Comment는 최종 HTML 에서는 안보임
• HTML 에서 보여지는 Comment 를 원한다면 <!-- -->

14. Utility
• 내장 함수로. 주로 string 처리 및에 유용 함
• Handlebars.Utils.escapeExpression(string)
• HTML 과 태그들을 String 으로 표현 : new Handlebars.SafeString().toString() 과 동일함
• Handlebars.Utils.isEmpty(value)
• value 에 값이 있는지 없는지 판단
• Handlebars.Utils.extend(obj, value)
• obj 에 value 확장 ( $.extend 와 동일 )
• Handlebars.Utils.toString(obj, value)
• toString 과 동일
• Handlebars.Utils.isArray(obj, value)
• obj 가 array 인지 판단
• Handlebars.Utils.isFunction(obj, value)
• obj 가 function인지 판단

15. Supported Environments
• EcamScript 3이 동작하는 환경이면 동작하게 설계
• Node.js
• Chrome
• Firefox
• Safari 5+
• Opera 11+
• IE 6+

16. 감사합니다.
• 예제 코드
• https://github.com/kazikai/handlebars