smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

회사에서 handlebar.js를 사용할 일이 생겼다. 헷갈리고 이해가 어려웠던 부분 위주로 정리해야겠다.
더 자세히 알고싶은 분은 👉여기를 참고하세욘

Handlebar.js 란?

handlebar.js(==핸들바)란 자바스크립트의 템플릿 엔진 중 하나로써, {{}} bracket을 이용해 데이터를 표현한다.
html 페이지에서도 사용이 가능하다. ㅎㅎ
그렇지만 나는 jsp 페이지에서 사용 중이다..:)




사용법🎶

사실 설명은 거두절미하고, 일단 뭐라도 써봐야 제일 알기가 쉽다.

  1. 기본적으로 “{ {data} }”형태를 사용한다.
  2. for와 같은 반복의 형태도 존재한다. 헬퍼라고 한다.

브라켓이 자꾸 이상하게 나와서 이번에는 코드를 전부 이미지로 첨부해야겠다. ㅠㅠ…
이미지

  1. 사용자는 헬퍼를 자유롭게 등록할 수도 있다. 
    Handlebars.registerHelper(‘add Helper’, function (help){
  var add = {더해줄 로직}
  return add;
});




사용예시

👇우선 이 밑의 코드를 기준으로 설명하려고 한다.👇

  • html
    이미지2
  • script
    이미지3

기본 형태

핸들바 템플릿은 script 태그 안에 type를 “text/x-handlebars-template”로 설정한다.
템플릿 안 구조에 {{}}로 감싸진 부분에 데이터가 바인딩된다.
{{#if items}}를 통해 items가 존재한다면 그 안의 코드가 실행된다. (if문 구조)
{{#items}} 와 {{/items}} 안에는 items라는 배열의 길이만큼 반복하게 된다. (반복문 구조)
또한 그 안에서 {{name}}, {{tel}}은 객체에서 name, tel의 속성값이 바인딩 된다.

결과
이미지4

Partials

개인적으로 헷갈렸던 부분이다…😵‍💫
원하는 템플릿을 부분적으로 재사용이 가능하다. partials은 다른 템플릿에서 호출도 가능하다.
우선 사용을 하려면 등록을 해야한다.

const noDataPartial = $('#noData-template').html();
Handlebars.registerPartial('noData', noDataPartial);

‘noDataPartial’를 ‘noData’라는 이름으로 사용하는 거다.
부분호출은 {{>noData}} 식으로 호출한다.

partials에 원하는 내용을 추가(?)해주고 싶다면
{{#> noData contents=”데이터가 없습니다.”}} {{/noData}} 이 부분을 추가한다.
그리고 해당 템플릿 안에서 {{contents}} 이렇게 호출하면 된다.
그러면 {{contents}} 부분에 데이터가 없습니다. 라는 텍스트가 들어간 것을 확인 할 수 있다.
data 값을 비워두고 실행하면 아래와 같은 결과가 나온다. ✿˘◡˘✿
이미지5




🌝느낀점🌝

사실 계속 사용하다보면 손에 익을 것 같긴 한데,,, 개인적으로는 불편했다..ㅠ_ㅜ..
원하는 데이터가 있으면 계속해서 바인딩을 시켜줘야 하고,
어느 부분에 바인딩을 할 건지 제대로 파악을 해야하기 때문에 오히려 헷갈릴 때도 있었다….
덜 헷갈리라고 만든 언어인데,,,;;; 이런 아이러니,,ㅎㅎ😭
내가 미숙한 탓도 있겠지만… 다른 방법을 놔두고 굳이굳이 먼저 핸들바를 사용하지는 않을 것 같다;;
그래도 이번 기회에 배운게 된 것에 감사하면서 좀 더 사용을 해봐야겠다. 그러면 더 감이 잡힐 수도,,,?!?!😎

참고