시작하기에 앞서

Handlebars 를 사용하다보면 종종 hbs 파일 내에서 커스텀 함수를 사용하고싶은 경우가 있다.
이런경우 어떻게 커스텀 함수를 만들고 사용하는지 알아본다.

Custom 함수 등록

custom 함수를 등록하는 방법은 간단하다.

Handlebars.registerHelper('ifCond', (v1, te, v2, options) => {
  if (te === '===') {
    if (v1 === v2) {
      return options.fn(options.data.root);
    }
    return options.inverse(options.data.root);
  }
  if (te === '>') {
    if (v1 > v2) {
      return options.fn(options.data.root);
    }
    return options.inverse(options.data.root);
  }
  
  ...
});

간단하게 ifCond 라는 키워드로 커스텀 함수를 등록했다. (기본 if 함수만으로 부족하다고 가정한다)

이것을 hbs에서 사용하려면

{{#ifCond 1 '===' 2}}
  good
{{else}}
  fail
{{/ifCond}}

이와같이 사용할 수 있다.

여기서 1, ’===’, 2 는 순서대로 Handlebars.registerHelper 함수의 인자로 전달된다. (위 코드 참고)

v1 = 1   
te = '==='   
v2 = 2

의 순서로 대입된다.

그리고 options.fn 는 참일 때 실행되고 options.inverse 는 거짓일 때 실행된다.
여기서 주의할 점은 커스텀 함수의 경우 내부에서 변수를 인식하지 못한다. 따라서 fn, inverse 의 인자로 options.data.root 를 넘겨주어서 커스텀 함수 내부에서도 변수에 접근할 수 있도록 처리해줘야 한다.

참고

• 공식문서