Handlebars

Handlebars 는 간단한 템플릿 엔진이다.
템플릿엔진 : (문자열템플릿 + 데이터) = html 로 합쳐주는 소프트웨어

빠른설치

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

---

기본 표현식

{{value}}

더블 브레이스로 여닫는다.

---

Helper 표현법

{{#if boolean값}} // if else문이랑 같음
	//boolean값이 참일때 렌더링
{{else}}
	//boolean값이 거짓일때 렌더링
{{/if}}

{{#each 배열}} // forEach문이랑 같음
	//배열을 사용해 렌더링
{{/each}}

빌트인 헬퍼외의 기능이 사용하고싶다 ? 커스텀헬퍼를 만들어서 사용 !

---

렌더링 방법

const template = Handlebars.complie(문자열) // compile은 함수를 반환함
el.innerHtml = template(데이터)

사용예시

const source = `
<h2>{{title}}</h2>
{{#if hasList}}
    <ul>
     {{#each list}}
      <li>이름: {{name}} , 나이:{{age}}</li>
     {{/each}}
    </ul>
{{else}}
    <div>데이터가 없습니다.</div>
{{/if}}
`

const data = {
    title:'인물 목록',
    list:[
        {name:'jeon',age:28},{name:'park',age:29},{name:'son',age:34}
    ]
}
data.hasList = data.list.length>0;

const template = Handlebars.compile(source)
document.querySelector('.root').innerHTML=template(data)