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

// 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>