Handlebars.js 문법

• <style>, <template> 태그에서는 일반적인 HTML/CSS와 다르게 Handlebars.js 문법 일부를 지원해요.
• Handlebars.js 문법을 활용하면 <style>, <template> 태그 내에서 {{…}} 문법으로 컨텍스트(Context) 객체의 값에 접근하고 활용해서 사용자가 설정할 수 있는 블록을 제작할 수 있어요.
• 단순히 컨텍스트(Context) 객체에 접근하는 것뿐만 아니라, <style>, <template> 태그 내에서 간단한 로직을 구성할 수도 있어요.

{{…}} 문법

{{property.mySetting}}
{{property.myNested.mySetting}}

• {{…}} 문법을 통해서 컨텍스트(Context) 객체의 값에 접근할 수 있어요.
• . 으로 구분해서 중첩(Nested)된 값들에 접근할 수 있어요.

{{{…}}} 문법

{{property.myHTMLContents}}
-> <h1>Hello Block Maker!</h1>

{{{property.myHTMLContents}}}
-> <h1>Hello Block Maker!</h1>

• 기본적인 중괄호 2개 문법({{…}} 문법)과 거의 똑같지만 중괄호 3개 문법을 사용하면 HTML 컨텐츠를 이스케이프(Escape)하지 않고 있는 그대로 표현할 수 있어요.

{{#if}} {{else}} 문법 (+{{#unless}})

<style>
	{{#if property.showWelcome}}
		p {
			color: green;
		}
	{{/if}}
</style>

<template>
	{{#if property.showWelcome}}
		<p>만나서 반가워요!</p>
	{{else}}
		<p>인사는 생략할게요...</p>
	{{/if}}
</template>

기본적인 {{#if}} 구문 활용의 예시

<template>
	{{#if (eq property.light 'green')}}
		<p>초록 불이니 건널 수 있어요.</p>
	{{/if}}
	{{#if (and (eq property.light 'green') (gte property.cars 1))}}
		<p>초록 불이지만 차가 1대 이상 있어요. 조심히 건너가세요.</p>
	{{/if}}
</template>

헬퍼를 함께 활용하는 {{#if}} 구문 활용의 예시

• {{#if}} {{else}} 구문으로 분기 처리를 할 수 있어요.
• {{#if}} 가 있으면 {{/if}} 로 항상 닫혀야 해요.
• {{else}} 구문은 필요한 경우에만 중간에 끼워서 사용할 수 있어요.
• {{#if}} 와 비슷하지만 논리 연산이 반대인 문법으로 {{#unless}} 도 있어요.
• 기본적인 {{#if}} 구문에서는 false, undefined, null, "", 0, [] 값들은 모두 거짓 값(Falsy)으로 취급돼요.

{{#if (helper ...)}}

• 편의를 위한 다양한 헬퍼(Helper) 문법을 함께 활용하면 {{#if}} 구문을 더 확장해서 사용할 수 있어요.
• 헬퍼 문법을 활용하면 동일성 비교(eq), 부등호 비교(gt, gte, lt, lte) 등 다양한 비교 연산자와 논리 연산자(and, or)를 함께 활용할 수 있어요.

{{#each}} 문법 (+{{else}})

{
	"property": {
		"items": [
		  { "name": "사과" },
		  { "name": "바나나" },
		  { "name": "파인애플" }
		]
	}
}

<template>
    <ul>
        {{#each property.items}}
            <li>
                {{#if @first}}
                    <strong>[첫 항목]</strong>
                {{/if}}
                {{#if @last}}
                    <strong>[마지막 항목]</strong>
                {{/if}}
                {{@index}}: {{name}}
            </li>
        {{else}}
            <li>표시할 항목이 없어요.</li>
        {{/each}}
    </ul>
</template>

• {{#each}} 구문은 배열이나 객체의 항목들을 순차적으로 출력할 때 사용해요.
• {{#each}} 가 있으면 반드시 {{/each}} 로 닫아야 해요.
• {{else}} 구문을 중간에 추가하면, 배열이 비어 있을 때의 대체 내용 표시에 활용할 수 있어요.
• {{#each}} 내에서 @index, @first, @last 같은 특수 키워드를 사용할 수 있어요.
  • @index: 현재 항목의 0부터 시작하는 인덱스 값.
  • @first: 현재 항목이 첫 번째 항목이면 true, 아니면 false.
  • @last: 현재 항목이 마지막 항목이면 true, 아니면 false.
• 각 배열 요소의 키 값(예시의 items[].name)은 {{#each}} 구문 내에서 {{…}} 문법으로 접근할 수 있어요.
  • 예시처럼 {{name}} 과 같이 간단하게 접근이 가능해요.
  • {{this.name}} 과 같이 this 키워드를 사용해서 조금 더 명시적으로 표현할 수도 있어요.