[handlebars] Partials 알아보기

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

Handlebars는 partials를 이용하여 템플릿을 재사용 가능하게 한다. Partials는 일반적인 Handlebars 템플릿으로 다른 템플릿을 직접적으로 호출할 수 있다.

Basic Partials

partials를 이용하기 위해서 반드시 Handlebars.registerPartial로 등록이 되어야 한다. 

Handlebars.registerPartial('myPartial', '{{name}}')

이는 myPartial이라는 partial을 등록한다. Partial들은 사전에 컴파일 되며 사전에 컴파일된 템플릿에 두번째 파라미터로 전달된다. 

partial을 호출하는 것은 partial 문법을 이용하여 호출할 수 있다. 

{{> myPartial }}

이는 myPartial로 이름지어진 partial을 렌더링한다. partial을 실행하면 이는 현재 수행되는 컨텍스트 하위에 존재하게 된다.

Dynamic Partials

sub expression문법을 이용하연 선택된 partial을 동적으로 실행할 수 있다.

{{> (whichPartial) }}

이것은 whichPartial을 실행하고 이 함수에 의해서 반환된 이름으로 된 partial을 렌더링한다.

subexpression은 변수들을 resolve하지 않는다. 그러므로 whichPartial은 반드시 함수이어야한다. 만약 단순 변수가 partial이름을 가니면 lookup 헬퍼를 이용하여 resolve할 수 있다.

{{> (lookup . 'myVariable') }}

Partial Contexts 

partial을 custom context에서 수행이 가능하며 이는 partial call을 위한 컨텍스트를 전달함으로 해서 가능하다.

{{> myPartial myOtherContext }} 

Partial Parameters

커스텀 데이터는 해시 파라미터를 통해서 partial에 전달될 수 있다.

{{> myPartial parameter=value }}

이는 parameter를 parar이 실행될때 value 값으로 전달한다.
이는 부모 컨텍스트의 데이터를 partial로 전달해서 노출하고자 할때 유용하다.

{{> myPartial name=../name }}

Partial Blocks 

partial을 렌더하기 위한 시도를 할때 보통의 행동은 not found는 error를 throw 하기 위한 구현을 하는 것이다. 만약 failover가 필요한경우, partial은 블록 구문을 이용하여 해당 처리를 한다.

{{#> myPartial }}
    Failover content
{{/myPartial}}

이것은 만약 myPartial에 대한 partial이 등록되지 않은경우 Failover content가 렌더될 것이다.

이 블록 문법은 partial에 템플릿을 전달하기 위해서 사용된다. 이는 @partial-block으로 이름지어진 특별한 partial에 의해서 실행될 수 있다.

{{#> layout }}
    My Content
{{/layout}}

layout partial은 다음을 포함한다.

Site Content
{{> @partial-block }}

이런경우 다음을 렌더한다.

Site Content
My Content

이러한 방식으로 호출될때 블록은 호출되는 시점에 partial의 컨텍스트 하위에서 수행이 된다. 깊어진 path와 블록 파라미터들은 partial템플릿 대신에 partial block에 연관되어 수행이 된다.

{{#each children as |child|}}
    {{#> childEntry}}
        {{child.value}}
    {{/childEntry}}
{{/each}}

 이것은 이 템플릿으로 부터 child.value를 렌더링한다. partial이 아니다.

Inline Partials

템플릿들은 inline 데코레이터를 통해서 블록으로 스콥된 partial들을 정의할 것이다. 

{{#*inline "myPartial"}}
    MyContent
{{/inline}}
{{#each children}}
    {{> myPartial}}
{{/each}}

이것은 myPartial 로 이름지어진 partial을 렌더링 한다. 각 child마다.

각 inline partial은 현재 블록과 모든 자식에 가능하며 이는 다른 partial의 실행을 포함한다. 이것은 레이아웃 템플릿을 포함하며 기능적으로 유사하다.

{{#> layout}}
    {{#*inline "nav"}}
        My Nav
    {{/inline}}
    {{#*inline "content"}}
        My Content
    {{/inline}}
{{/layout}}

layout partial은 다음과 같을 것이다. 

<div class="nav">
    {{> nav}}
</div>
<div class="content">
    {{> content}}
</div>

Author : Unknown

Share this

Related Posts