handlebars.js

자바스크립트(javascript) 템플릿 엔진인 핸들바(handlebars) 템플릿 태그에 대해 설명합니다.

템플릿 태그

핸들바는 HTML내에 전용 템플릿 태그 {[, ]} 를 사용합니다.

주석

devForbizTpl 클래스는 HTML 작성시 템플릿을 지정할 때 사용됩니다. devForbizTpl 은 랜더링 되지 않은 템플릿을 감춰주고, 랜더링이 완성되면 자동으로 삭제 됩니다.

* JSON DATA

{
    "title": "제목",
    "body": "Hello wrold!"
}

* Template Code

<div class="entry devForbizTpl">
    <h1>{[title]}</h1>
    <div class="body">
        {[body]}
    </div>
</div>

* Results

<div class="entry">
    <h1>제목</h1>
    <div class="body">
        Hello wrold!
    </div>
</div>

HTML Escaping

핸들바를 통하여 HTML을 표시하고자 할 때는 {[{, }]} 를 사용합니다.

중요

Template_ 와 함께 사용시 {[{ 태그는 {[{\ 로 바꿔써야 합니다.

* JSON DATA

{
    "title": "All about <p> Tags",
    "body": "<p>This is a post about &lt;p&gt; tags</p>"
}

* Template Code

<div class="entry devForbizTpl">
    <h1>{[title]}</h1>
    <div class="body">
        {[{body}]}
    </div>
</div>

* Results

<div class="entry">
    <h1>All About <p> Tags</h1>
    <div class="body">
        This is a post about <p> tags</p>
    </div>
</div>

if

조건부로 블럭을 랜더링을 위해 if 를 사용할 수 있습니다. if 에 명시된 변수의 값이 false, undefined, null, "", 0, [](빈 배열) 인 경우 핸들바는 해당 블럭을 랜더링하지 않습니다.

* JSON DATA

{
    "firstName": "first",
    "lastName": "last"
}

* Template Code

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

* Results

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

{[else]} 를 사용하면 거짓 값을 반환할 때 실행할 템플릿 블럭을 지정할 수 있습니다.

* Template Code

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

* Results

<div class="entry">
        <h1>Unknown Author</h1>
</div>