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}} |
{{! }} 블록으로 주석을 추가할 수 있다.
{{log}} 블록으로 템플릿 출력 시 로깅할 수 있다.
{{{body}}} HTML요소는 자동으로 이스케이프 시켜준다.
Helper
Helper는 기본적으로 다른 개발 언어의 함수라고 볼 수 있다.
기본 문법은 아래와 같다.
|
1 |
{{{ Helper_Name param1 parm2 ... }}} |
Handlebars의 Helper Call은 단순한 식별자이며, 0개 이상의 Parameter를 받을 수 있다. 그리고 구분은 공백으로 한다. 나누게 된다. Handlesbars는 위에 설명한 표현식과 완전히 동일한 방법으로 사용된다.
반복과 같은 다른 템플릿엔진에서 제공하는 Helper가 존재한다.
|
1 2 3 |
{{#each userlist}} {{user}} {{/each}} |
아래 코드는 link라는 Helper에 story라는 Parameter를 넣어 실행시킨 결과를 출력하라는 의미이다.
|
1 |
{{{link story}}} |
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>" ); }); |
Helper 는 최종 Parameter들로 key-value pair hash 를 전달할 수도 있다.
|
1 |
{{{link "See more..." href=story.url class="story"}}} |
이럴 경우 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>" ); }); |
Subexpressions
Handlebars 는
subexpression을 제공한다. 이는 단일
mustache를 이용하여 복합 Helper를 호출할 수 있다. 그리고 내부 Helper의 결과를 외부 Helper Parameter로 전달 할 수 있다. Subexpression은 ( )로 구분한다.
|
1 |
{{outer-helper (inner-helper 'abc') 'def' }} |
위 코드에서는 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}} |
출력 결과 뉴라인과 포매팅된 공백 처리 결과는 아래와 같다.
|
1 |
<a href="foo">bar</a><a href="bar">Empty</a> |
이 확장은 라인 처리의 기본적인 동작이며 "standalone" Helper이다.
|
1 2 3 4 5 6 7 8 9 |
{{#each nav}} <a href="{{url}}"> {{#if test}} {{title}} {{^}} Empty {{/if}} </a> {{~/each}} |
결과는 아래와 같다.
|
1 2 3 4 5 6 |
<a href="foo"> bar </a> <a href="bar"> Empty </a> |
Escaping
Handlebars컨텐츠는 하나 혹은 두개의 방법으로 이스케이프 될 수 있다. 이는 인라인 이스케이프 혹은 raw block helpers이다. 인라인 escape는 prefixing mustache블록으로 \으로 시작하는 블록이다. Raw block은 {{{{ mustache 브레이스로 생성된다.
|
1 2 3 4 |
\{{escaped}} {{{{raw}}}} {{escaped}} {{{{/raw}}}} |
참고사이트
깃허브: https://github.com/wycats/handlebars.js/
http://ohgyun.com/427
http://sailboat-d.tistory.com/40
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 |
|---|