handlebars 라이브러리

자바스크립트에서 html 태그를 만들어 dom에 append를 쉽게 할 수 있는 라이브러리를 소개합니다.

handlebars는 자바스크립트의 데이터를 레터럴 형식으로 dom을 만드는 라이브러리입니다. 

 

기본문법은 더블브레스{{ }}를 사용하며, 태그의 속성명이 더블 브래이스 안에 있는 속성명으로 대체됩니다.

 

 

handlebars에서 지원하는 간단한 함수를 사용할 수 있습니다.

handlebars안에 있는 함수는 헬퍼라고 부르며, '#함수명' 형식으로 사용합니다.

예를 들어

조건문은 

{{#if}}

{{else}}

{{/if}}

 

반복문은 

{{#each}}

{{/each}}

더 다양한 표현을 위해서 정의 함수(헬퍼)를 등록해서 사용할 수 있습니다.

헬퍼와 관련해서 자세한 내용은 공식 홈페이지를 참조하시길 바랍니다.

 

www.handlebarsjs.com  

Handlebars

 

 

마지막으로 handlebars 예제를 보겠습니다.

<!-- html -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

<div id="app">
</div>

 

// js
const source = `
<div class="entry">
  <h1>{{title}}</h1>
  {{#if hasList}}
  <ul>
    {{#each list}}
      <li>{{title}} - {{director}}</li>
    {{/each}}
  </ul>
  {{else}}
  <div class="jumbotron">
    등록된 영화 목록이 없습니다.
  </div>
  {{/if}}
</div>
`;

let template = Handlebars.compile(source);

let data = {
  title: '영화',
  list: [
    { title: '너의 이름은', director: '신카이 마코토', actors: ['카미키 류노스케','카미시라이시 모네','나리타 료','유우키 아오이'] },
    { title: ' 패신저스', director: '모튼 틸덤', actors: ['제니퍼 로렌스', '크리스 프랫', '마이클 쉰', '로렌스 피시번'] },
    { title: '사랑하기 때문에', director: '주지홍', actors: ['차태현', '김유정', '서현진', '박근형'] },
    { title: '내 어깨 위 고양이, 밥', director: '로저 스포티스우드', actors: ['김하늘', '유인영', '이원근'] },
  ]
};

data.hasList = data.list.length > 0;

document.querySelector('#app').innerHTML = template(data);