[handlebars] Built-In Helpers

from : http://handlebarsjs.com/builtin_helpers.html

The if block helper

if헬퍼를 이용하여 조건에 따라 블록을 렌더할 수 있다. 만약 아규면트가 false, undefined, null, "", 0혹은 []을 반환하는 경우 Handlebars는 블록을 렌더하지 않는다.

<div class="entry">
    {{#if author}}
        <h1>{{firstName}} {{lastName}}</h1>
    {{/if}}
</div>

비어있는 ( {} )컨텍스트를 이용하였다면 author은 undefined로 되며 결과는 다음과 같다.

<div class="entry">
</div>

block expression을 이용하는경우 expression이 false와 같은 값을 반환하는 경우 특정 템플릿 섹션을 실행할수 있다. 섹션은 {{else}}로 된 부분이며 이는 "else section"이라 부른다.

<div class="entry">
    {{#if author}}
        <h1>{{firstName}} {{lastName}}</h1>
    {{else}}
        <h1>Unknown Author</h1>
    {{/if}}
</div>

The unless block helper

unless블록을 이용하여 if헬퍼의 inverse 처리를 할 수 있다. 이 블록은 만약 표현식이 false 값인경우 렌더링한다.

<div class="entry">
    {{#unless license}}
    <h3 class="warning">WARNING: This entry does not have a license!</h3>
    {{/unless}
</div>

만약 현재 컨텍스트에서 license를 살펴보고 결과가 false 값이라면 핸들바스는 warning을 렌더링한다. 그렇지 않은경우 렌더링 하지 않는다.

The each block helper

each를 이용하여 반복을 처리할 수 있다. 블록 내부에서는 this를 이용하여 각 엘러먼트를 레퍼런스 할수 있다.

<ul class="people_list">
    {{#each people}}
        <li>{{this}}</li>
    {{/each}}
</ul>

컨텍스트는 다음과 같다.

{
    people: [
        "Yehuda Katz",
        "Alan Johnson",
        "Charles Jolley"
    ]
}

결과는 다음과 같다.

<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>

this 표현식을 이용하여 특정 컨텍스트를 현재 컨텍스트를 기준으로 참조할 수 있다.

또한 선택적으로 {{else}} 섹션을 제공하여 리스트가 비어있는경우 처리를 할 수 있다.

{{#each paragraphs}}
    <p>{{this}}</p>
{{else}}
    <p class="empty">No content</p>
{{/each}}

 추가적으로 객체를 위한 iteration은 {{@key}} 를 통해서 현재 key를 참조할 수 있다.

{{#each object}}
    {{@key}}: {{this}}
{{/each}}

iterator의 첫번째와 마지막 스텝은 @first와 @last를 통해서 접근이 가능하다.

중첩된 each블록은 path를 기반으로 깊이값을 통해서 반복에 접근할 수 있다. parent인덱스에 접근하기 위해서는 {{@../index}}를 이용할 수 있다.

each헬퍼는 또한 block parameters를 제공한다. 이는 이름 지어진 참조를 블록 내부 어디서든지 접근하게 해준다.

{{#each array as |value key|}}
    {{#each child as |childValue childKey|}}
        {{key}} - {{childKey}}. {{childValue}}
    {{/each}}
{{/each}}

이는 key와 value변수를 생성하고 자식은 depth 변수를 참조하지 않고서도 접근이 가능하다. 이 예제에서는 {{key}}는 {{@../key}}를 나타낸다. 그러나 많은 케이스에서 더 읽기 쉽다.

The with Block Helper

보통 핸들바스 템플릿은 컴파일된 메소드로 전달된 컨텍스트에 대해서 처리를 수행한다.

var source = "<p>{{lastName}}, {{firstName}}</p>";
var template = Handlebars.compile(source);
template({firstName: "Alan", lastName: "Johnson"});

결과는 다음과 같다.

<p>Johnson, Alan</p>

내장된 with블록 헬퍼를 이용하여 template의 섹션을위한 컨텍스트를 옮길 수 있다.

<div class="entry">
    <h1>{{title}}</h1>
    {{#with author}}
        <h2>By {{firstName}} {{lastName}}</h2>
    {{/with}}
</div>

컨텍스트는 다음과 같다.

{
    title: "My first post!",
    author: {
        firstName: "Charles",
        lastName: "Jolley"
    }
}

결과는 다음과 같다.

<div class="entry">
    <h1>My first post!</h1>
    <h2>By Charles Jolley</h2>
</div>

with는 또한 block parameters와 함께 사용된다. 이는 현재 블록내의 참조를 정의한다.
다음 예제는 위 예제를 변형한 것이다.

<div class="entry">
    <h1>{{title}}</h1>
    {{#with author as |myAuthor|}}
        <h2>By {{myAuthor.firstName}} {{myAuthor.lastName}}</h2>
    {{/with}}
</div>

이 코드는 ../와 같은 깊이 참조자를 이용하는 것보다 잠재적으로 복잡한 템플릿을 이용할때 더 명확하게 해준다.

전달된 값이 비어있는 경우를 위해서 선택적으로 {{else}}를 이용할 수 있다.

{{#with author}}
    <p>{{name}}</p>
{{else}}
    <p class="empty">No content</p>
{{/with}}

The lookup helper

lookup 헬퍼는 handlebars변수를 이용하여 동적 파라미터를 참조하기 위한 헬퍼이다. 이는 배열의 인덱스를 해석하기 위해 유용하다.

{{#each bar}}
    {{lookup ../foo @index}}
{{/each}}

The log block helper

log 헬퍼는 템플릿이 수행될때 컨텍스트의 상태를 로깅하기 위한 목적으로 사용된다.

{{log "Look at me!"}}

Handlebars.logger.log를 위임하여 커스텀 로깅을 오버라이딩 할 수 있다.
여러개의 아규먼트를 이 메소드에 전달하여 로거를 찍을 수 있다.

{{log "This is logged" foo "And so is this"}}

log level은 해시 파라미터를 이용하여 지정이 가능하며 debug, info, warn, error를 지정할 수 있다. 이 값이 없으면 기본적으로 warn으로 설정된다.

{{log "Log!" level="error"}}

로깅은 선택적으로 Handlebars.logger.level에 설정한 값에 따라 출력이 된다. 기본값은 info이다. 모든 로그 스테이트먼트는 현재 레벨을 출력시 설정할 수 있다.

The blockHelperMissing helper

environment's helpers hash에서 직접적으로 resolve할 수 없는 경우에 암묵적으로 호출된다.

{{#foo}}{{/foo}}

이것은 이 헬퍼를 호출하며 현재 컨텍스트 상에서 foo의 값을 해석한다. 그리고 options.name 필드에 "foo"를 설정한다.

이것은 사용자에 의해서 오버라이드 될것이다. 다음과 같이 블록 실행을 통해 변경이 가능하다.

Handlebars.registerHelper('blockHelperMissing', function(context, options) {
    throw new Handlebars.Exception('Only if or each is allowed');
});

이는 mustache-style블록 실행의 사용을 막기위해 사용될 수 있다. 이는 더 효과적인 if와 each 헬퍼들을 위한 목적이다.

The helperMissing helper

내부적 헬퍼는 특정 황경에서 헬퍼가 발견되지 못하는 경우 혹은 현재 컨텍스트 내에서 발견되지 못하는 경우에 호출된다. 양쪽 케이스에서 이것은 blockHelperMissing 헬퍼를 우선적으로 수행한다.

{{foo}}
{{foo bar}}
{{#foo}}{{/foo}}

각각은 이 헬퍼를 호출하고, 특정 아규먼트들을 전달한다. 이 헬퍼는 knownHelperOnly모드에서는 호출되지 않는다.

이것은 어플리케이션에서 오버라이딩 될수 있다.

Handlebars.registerHelper('helperMissing', function(/* [args, ] options */) {
    var options = arguments[arguments.length - 1];
    throws new Handlebars.Exception('Unknown field: ' + options.name);
});

Author : Unknown

Share this

Related Posts