Handlebars.js : 자바스크립트 템플릿 작업 라이브러리
→ 템플릿 작업 시 replace 메소드로 치환하는 방법 대신 사용하며, 코드의 가독성을 높일 수 있음
기본 예제
<!-- 데이터의 형태가 객체일 때 -->
<script type = "rv-template" id="categoryList">
<li class="item" data-category="{{id}}">
<a class="anchor">
<span>{{name}}</span>
</a>
</li>
</script>- 핸들바 템플릿은 script태그의 type을 rv-template으로 작성하고 html문서 안에 위치시킨다.
- 핸들바 템플릿 안 {{ }} 로 감싸진 부분이 데이터와 바인딩 되는 부분이다.
- {{#category}} {{/category}}로 감싸진 코드들은 category라는 배열의 길이만큼 반복되고, 그 내부의 {{id}}, {{name}}은 각 배열의 요소의 값들이 바인딩 되게된다.
//데이터의 형태가 객체일 때
//템플릿 가져오기
var template = document.querySelector("#categoryList").innerHTML;
//핸들바 템플릿 컴파일
var bindTemplate = Handlebars.compile(template); //bindTemplate는 메소드
//핸들바 템플릿에 바인딩할 데이터(객체)
var data = {
id: 1, name: "전시"
}
//결과를 담을 HTML
var resultHTML = ""
//핸들바 템플릿에 데이터를 바인딩해서 결과 HTML에 담아줌
resultHTML = bindTemplate(data);
//결과HTML을 적절한 위치에 삽입
document.querySelector(".event_tab_lst").insertAdjacentHTML('beforeend', resultHTML);- 아이디를 이용해 핸들바 템플릿을 가져온 뒤, 가져온 템플릿을 Handlebars.compile 메소드로 컴파일해서 bindTemplate 메소드에 담는다.
- 컴파일된 템플릿이 담긴 bindTemplate 메소드에 바인딩할 데이터를 파라미터로 넣으면 데이터가 바인딩된 HTML이 리턴된다.
- 바인딩된 템플릿을 담고있는 결과HTML을 적절한 위치에 삽입해주면 된다.
1 . 핸들바 템플릿 가져오기
2 . 핸들바 템플릿 컴파일
3 . 컴파일된 핸들바 템플릿에 데이터 바인딩
4 . 데이터가 바인딩된 템플릿 적절한 위치에 삽입
조건에 따른 상황 처리, 배열이 포함된 데이터의 처리
<!-- 조건 : 이미지가 있을때만 이미지노출 -->
<!-- 배열이 포함된 데이터 : 전체댓글부분 -->
<script type="rv-template" id="allCommentList">
<div class="grade_area">
.
.
<strong class="text_value"><span>{{averageScore}}</span><em class="total">5.0</em></strong>
<span class="join_count"><em class="green">{{commentCount}}</em>등록</span>
</div>
<ul class="list_short_review">
{{#allCommentList}}
<li class="list_item">
<div>
{{#if commentImages.saveFileName}}
<div class="review_area">
<div class="thumb_area">
<a href="javascript:void(0);" class="thumb"
title="이미지 크게 보기">
<img width="90" height="90" class="img_vertical_top" src="resources/{{commentImages.saveFileName}}" alt="리뷰이미지">
</a>
<span class="img_count">1</span>
</div>
<h4 class="resoc_name">{{productDescription}}</h4>
<p class="review">{{comment}}</p>
</div>
{{else}}
<div class="review_area no_img">
<h4 class="resoc_name">{{productDescription}}</h4>
<p class="review">{{comment}}</p>
</div>
{{/if}}
<div class="info_area">
<div class="review_info">
<span class="grade">{{score}}</span> <span class="name">{{reservationName}}</span>
<span class="date">{{reservationDate}}</span>
</div>
</div>
</div>
</li>
{{/allCommentList}}
</ul>
</script>- 배열을 포함한 데이터의 처리
- 데이터중 배열을 포함한 allCommentList는 {{#allCommentList}} {{/allCommentList}}로 감싸주어 해당 배열의 갯수만큼 반복되도록 한다.
- 조건에 따른 상황처리
- 조건 : 댓글이 이미지를 포함하고 있으면 이미지와 댓글을 함께 표시한다. 이미지가 없다면 댓글만 표시한다.
- {{#if commentImages.saveFileName}} - {{else}} - {{/if}} : saveFileName에 값이 있다면 {{#if}} 아래에 있는 코드가 실행되고 값이 없다면 {{else}} 아래에 있는 코드가 실행된다.
//배열을 포함한 데이터
var data = {
averageScore : "3.8",
commentCount : "13",
//배열
allCommentList : [
{...},
{...},
{...}
]
//객체
displayInfo : {
productDescription : "공연이름"
}
}
var description = data.displayInfo.productDescription;
var html = document.querySelector("#allCommentList").innerHTML;
var bindTemplate = Handlebars.compile(html);
var resultHTML = "";
//배열 형태의 데이터 처리
data.allCommentList.forEach(function(item){
item.productDescription = description;
item.score = item.score.toFixed(1);
});
resultHTML += bindTemplate(data);
document.querySelector(".short_review_area").insertAdjacentHTML('afterbegin', resultHTML);- 반복되는 배열안에 있는 h4 class="resoc_name" {{productDescription}} 부분에 productDescription : "공연이름"을 바인딩 시켜줘야 했다.
- 해당 부분이 {{#allCommentList}}{{allCommentList}}로 감싸져있었기 때문에 allCommentList 배열에 데이터를 붙힌 뒤 바인딩 시켜줬다.
- score은 소수점으로 표기되어야했기때문에 toFixed메소드를 사용하여 소수점 자리를 고정시켜줬다.
헬퍼 함수의 사용
<p class="dsc">
{{#type productPrice}}
{{productPrice}}
{{/type}}
20인 이상 단체 20% 할인<br>
국가유공자, 장애인, 65세 이상 4,000원
</p>Handlebars.registerHelper("type", function (productPrice) {
var infoText = "";
for(var i = 0; i < productPrice.length; i++){
if (productPrice[i].priceTypeName === "A") {
infoText += "성인(만 19~64세) " + productPrice[i].price + "원 <br>";
} else if (productPrice[i].priceTypeName === "Y") {
infoText += "청소년(만 13~18세) " + productPrice[i].price + "원 <br>";
} else if (productPrice[i].priceTypeName === "B"){
infoText += "어린이(만 4~12세) " + productPrice[i].price + "원 <br>";
}
}
return infoText;
});- 데이터에 따라서 나타내줘야 하는 문구가 다르기때문에 핸들바의 헬퍼함수를 사용하여 문구를 나타내주었다.
참고
