[Handlebars.js] Template와 Helper 사용하기

들어가기에 앞서

Handlebars에서 제공하는 Helper을 사용하는데 있어서 두 가지 방식이 있습니다.
서버에서 helper을 등록하여 랜더링 되는 과정에서 사용하는 helper이 있고, 초기 랜더링이 된 후 페이지 내에서 ajax를 통한 등의 부분 새로고침을 할 경우에 사용하는 helper이 있습니다.
이번 포스팅에서는 페이지 내에서 사용하는 helper와 template를 알아보도록 하겠습니다.

Helper

// declare
Handlebars.registerHelper('fullName', (firstName, lastName) => {
    return firstName + ' ' + lastName;
});

// use
{{fullName 'grate' 'marsland'}}

// result
grate marsland

Template

Template의 경우에 .hbs 파일 내에 {{ }} 를 사용할 경우 페이지가 랜딩되면서 이미 변환을 해버려서 원하는 결과를 얻을 수 없습니다. 그래서 랜딩이 될 때 처리되지 않도록 {{ }} 문법 앞에 \ 를 붙여주도록 합니다.

// declare
<script id="template" type="text/x-handlebars-template">
    \{{#each memberList}}
    <li>
        <a href="#">
            <strong class="title">\{{ id }}</strong>
            <div class="hash"><span>\{{ name }}</span></div>
        </a>
    </li>
    \{{/each}}
</script>

// use
const source = $('#template').html();
const template = Handlebars.compile(source);
const data = {
    memberList: [
      {
        id: 'marsland',
        name: '통통만두'
      },
      {
        id: 'aresland',
        name: '뚱뚱만두'
      }
    ]
};
const html = template(data);
$dest.append(html);

// result
<li>
    <a href="#">
        <strong class="title">marsland</strong>
        <div class="hash"><span>통통만두</span></div>
    </a>
</li>
<li>
    <a href="#">
        <strong class="title">aresland</strong>
        <div class="hash"><span>뚱뚱만두</span></div>
    </a>
</li>