Handlebars 의 expression은 Handlebars 템플릿의 기본유닛이다.
{{mustache}}를 이용할 수 있으며, 헬퍼에 이를 전달할 수 있으며 또는 해시 아규먼트에서 값처럼 사용할 수 있다.
기본사용법 :
다음은 가장 단순한 표현식이다.<h1>{{title}}</h1>이 표현식의 의미는 현재 컨텍스트 내에서 title라는 프로퍼티를 찾아서 대체하라는 의미이다.
Block helper들은 현재 컨텍스트를 다룬다. 그러나 표현식의 기본적인 의미는 변경하지 않는다.
Handlebars표현식은 dot 로 분리된 표현식으로 경로 탐색을 할 수 있다.
<h1>{{article.title}}</h1>이 표현식은 현재 컨텍스트에서 article를 찾고, title속성을 찾아서 대체하라는 의미이다.
Handlebars는 / 문법을 이용할 수 있다. 이를 이용하여 위 코드를 다음과 같이 기술 할 수 있다.
<h1>{{article/title}}</h1>식별자는 다음에 열거된 유니코드 문자를 제외하고 어떤것이든 될 수 있다.
Whitespace
! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~프로퍼티를 참조하는 것은 유효한 식별자가 아니다. 세그먼트 리터럴을 이용하기 위해서 [ 표기를 이용할 수 있다.
{{#each articles.[10].[#comments]}}상단 예에서 templage는 each파라미터를 통해서 자바스크립트의 다음 고드와 같이 처리된다.
<h1>{{subject}}</h1>
<div>
{{body}}
</div>
{{/each}}
articles[10]['#comments']Handlebars HTML escapes 값은 {{expression}}에 의해서 반환된다. 만약 이를 원하지 않는다면 "triple-stash" {{{ 를 이용하자.
{{{foo}}}
Helpers
Handlebars의 헬퍼 콜은 단순한 식별자이며, 0개 이상의 파라미터를 받을 수 있다. 이는 공백으로 나누게 된다. Handlesbars는 상단에 기본 사용법과 완전히 동일한 방법으로 사용된다.Handlebars.registerHelper('link', function(object) {헬퍼로 부터 HTML을 반환할때, Handlebars의 SafeString을 이용하여 기본적으로 escape하지 않을 수 있다. SafeString을 이용하면 모든 unknown 혹은 unsafe한 데이터들은 수동으로 escape된다. 이는 escapeExpression메소드를 이용한다.
var url = Handlebars.escapeExpression(object.url),
text = Handlebars.escapeExpression(object.text);
return new Handlebars.SafeString(
"<a href='" + url +"'>" + text + "</a>"
);
});
또한 단순 스트링, number, boolean과 같은 타입의 파라미터를 Handlebars helper에 전달 할 수 있다.
{{{lilnk "See more..."" story.url}}이 케이스에서 Handlebars는 2개의 파라미터를 전달한다. "See more..."와 현재 컨텍스트에서 store.url의 처리결과 값이 전달된다.
Handlebars.registerHelper('link', function(text, url) {이는 story.text의 값을 기반으로 동적 텍스트 값을 헬퍼에 이용할 수 있다.
url = Handlebars.escapeExpression(url);
text = Handlebars.escapeExpression(text);
return new Handlebars.SafeString(
"<a href='" + url + '''>" + text + "</a>"
);
});
{{{link story.text story.url}}}Handlebars헬퍼는 선택적인 시퀀스인 key-value쌍들을 받을수 있다. 이는 final파리미터로 사용되며 (도큐먼테이션에서 해시 아규먼트와 같이 참조된다.)
{{{link "See more..." href-story.url class="story"}}}해시 아규먼트에서 키들은 단순 식별자이어야 한다. 그리고 값은 Handlebars의 표현식이어야 한다.
이 의미는 값은 단순 식별자, paths, String이 될 수 있다는 의미이다.
Handlebars.registerHelper('link', function(text, options) {Handlebars는 추가적인 메타데이터를 제공한다. Hash argument와 같은 것으로 final parameter과 같이 helper에 제공된다.
var attrs = [];
for(var prop in options.hash) {
attrs.push(
Handlebars.escapeExpression(prod) + '="' + Handlebars.escapeExpression(options.hash[prop]) + '"');
}
return new Handlebars.SafeString (
"<a " + attrs.join(" ") + ">" + Handlebars.escapeExpression(text) + "</a>"
);
});
Handlebars또한 템플릿의 블록과 함께 헬퍼를 호출하기 위한 메커니즘을 제공한다. 블록 헬퍼는 어떠한 컨텍스트에서든지 선택된 블록을 0번 이상 호출할 수 있다.
Subexpressions
Handlebars 는 subexpression을 제공한다. 이는 단일 mustache를 이용하여 복합 헬퍼를 호출할 수 있다. 그리고 내부 헬퍼의 결과를 외부 헬퍼 아규먼트로 전달 할 수 있다. Subexpression은 ( )로 구분한다.{{outer-helper (inner-helper 'abc') 'def' }}이 케이스에서 inner-helper는 스트링 아규먼트 'abc'를 받는 헬퍼로 호출이 되며 이 결과는 outer-helper의 첫번째 아규먼트로 전달된다. 그리고 'def'는 두번째 아규먼트로 전달된다.
Whitespace Control
템플릿의 공백은 특정 mustache스테이트먼트의 각 부분에서 ~ 문자를 브레이스{의 의해서 생략이 될 수 있다.{{#each nav ~}}컨텍스트 :
<a href="{{ur}}">
{{~#if test}}
{{~title}}
{{~^~}}
Empty
{{~/if~}}
</a>
{{~/each}}
{
nav: [
{url: 'foo', test: true, title: 'bar'},
{url: 'bar'}
]
}
출력결과 뉴라인과 포매팅된 공백처리 결과이다.
<a href="foo">bar</a><a href="bar">Empty</a>이 확장은 라인 처리의 기본적인 동작이며 "standalone"헬퍼이다.
{{#each nav}}결과는 다음과 같다.
<a href="{{url}}">
{{#if test}}
{{title}}
{{^}}
Empty
{{/if}}
</a>
{{~/each}}
<a href="foo">
bar
</a>
<a href="bar">
Empty
</a>
Escaping
Handlebars컨텐츠는 하나 혹은 두개의 방법으로 이스케이프 될 수 있다. 이는 인라인 이스케이프 혹은 raw block helpers이다. 인라인 escape는 prefixing mustache블록으로 \으로 시작하는 블록이다. Raw block은 {{{{ mustache 브레이스로 생성된다.
\{{escaped}}
{{{{raw}}}}
{{escaped}}
{{{{/raw}}}}
EmoticonEmoticon