[handlebarsjs] 커스텀 헬퍼(customer helper) 만들어 보기

handlebars는 logicless를 추구하는 템플릿 언어이기 때문에 

기본적으로 제공되는 헬퍼(helper)들은 가장 기본적인 반복, 조건문만을 위한 헬퍼만 존재한다.

 

하지만 사용하다 보면 어쩔 수 없이 간단한 로직들이 템플릿에 추가될 경우가 있으며,

이럴 경우 커스텀 헬퍼를 추가할 수 있다.

 

내가 필요했던 커스텀 헬퍼는 자바의 equals와 같이 두 값을 비교할 수 있는 헬퍼이다.

조건문을 위한 기본 헬퍼는 아래와 같이 true/false인지 null/notNull 만으로 분기할 수 있는 헬퍼만 제공된다.

{{#if title}}
    ...
{{/if}}

 

커스텀 헬퍼를 추가하기 위해서는 Handlebars.registerHelper 을 사용하면 된다.

<script>
    Handlebars.registerHelper('ifCond', function(v1, v2, options) {
    	if (v1 === v2) {
    		return options.fn(this);
    	}
    	return options.inverse(this);
    });
</script>

 

위와 같이 ifCond라는 헬퍼를 추가한 후 실제 사용하는 것은 아래처럼 하면 된다.

GRADE값이 1과 같은 지를 비교하는 예제이다. 

{{#each this}}
	{{#ifCond GRADE "1"}}
		<span name="gradeAndClassName" class="badge badge-pill badge-light" data-result='{{@index}}'>{{GRADE}}-{{CLASS_NM}}</span>
	{{/ifCond}}
{{/each}}