handlebar를 활용한 템플릿 작업

---

• templating 작업은 ES2015에서 template literal로 좀 더 간단해지긴 했지만, 여전히 다양한 조건 상황에서의 처리 등은 복잡하다.
• templating 작업을 돕는 라이브러리는 꽤 다양하고 막강한 방법을 제공한다.
  • 강의에서는 handlebar 라이브러리를 사용한다.

예제

• template 코드

<script type="myTemplate" id="listTemplate">
	<li>
     <div>게시자 : {{name}}</div>
     <div class="content">{{content}}</div>
     <div>좋아요 갯수 <span> {{like}} </span></div>
     <div class="comment">
       <div>{{comment}}</div>
     </div>
  </li>
</script>	

• replace 대신 라이브러리 사용

var data = {
  	"id" : 88,
    "name" : "crong",
    "content" : "새로운글을 올렸어요",
    "like" : 5, 
    "comment" : "댓글이다"
};

var template = document.querySelector("#listTemplate").innerText;
var bindTemplate = Handlebars.compile(template);  //bindTemplate은 메서드입니다.

bindTemplate(data);

• 중괄호 두개로 감싸진 문자가 필드명과 일치하면 변환된다.
• bindTamplate은 메서드이다.

배열이 포함된 데이터의 처리

---

• 배열이 포함된 데이터

var data = {
  	"id" : 88,
    "name" : "crong",
    "content" : "새로운글을 올렸어요",
    "like" : 5, 
    "comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"]
};

• 반복문이 있는 template 코드

<script type="myTemplate" id="listTemplate">
    <li>
        <div>게시자 : {{name}}</div>
        <div class="content">{{content}}</div>
        <div>좋아요 갯수 <span> {{like}} </span></div>
        <div class="comment">
        <h3>댓글목록</h3>
        {{#each comment}}
            <div>{{@index}}번째 댓글 : {{this}}</div>
        {{/each}}
        </div>
    </li>
</script>	

data 자체가 많아진 경우의 처리

• 배열 데이터

var data = [
	{"id" : 88, "name" : "crong", "content" : "새로운글을 올렸어요", "like" : 5, "comment" : ["댓글이다", "잘했어요"]},
	{"id" : 28, "name" : "hary", "content" : "전 오늘도 노래를 불렀어요", "like" : 0, "comment" : ["제발고만..","듣고싶네요 그노래"]},
	{"id" : 23, "name" : "pororo", "content" : "크롱이 항상 말썽을 피워서 행복해~", "like" : 4, "comment" : []},
	{"id" : 5, "name" : "pobi", "content" : "물고기를 한마리도 잡지 못하다니..", "like" : 5, "comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"]}
];

forEach 또는 reduce를 사용해서 합칠 수 있다.

• forEach

var innerHtml = "";

data.forEach(function (item, index) {
	innerHtml += bindTemplate(item);
});

• reduce

var innerHtml = data.reduce(function(prve, next) {
	return prve + bindTemplate(next);
}, "");

조건 상황에 따른 처리

---

<script type="myTemplate" id="listTemplate">
    <li>
        <div>게시자 : {{name}}</div>
        <div class="content">{{content}}</div>
        <div>좋아요 갯수 <span> {{like}} </span></div>
        <div class="comment">
        <h3>댓글목록</h3>
        {{#if comment}}
            {{#each comment}}
                <div>{{@index}}번째 댓글 : {{this}}</div>
            {{/each}}
        {{else}}
            <div>댓글이 아직 없군요</div>
        {{/if}}
        </div>
    </li>
</script>

• 템플릿 라이브러리에서는 분기, 반복과 같은 방식을 기본으로 지원한다.

help function

---

• 좀 더 다양한 상황을 처리해야하는 경우 사용한다.
• 좋아요 갯수가 5개 이상이면 "축하해요. 좋아요가 5개 이상입니다."라는 문자열을 추가하려고 한다.

template 코드

<script type="myTemplate" id="listTemplate">
    <li>
        <div>게시자 : {{name}}</div>
        <div class="content">{{content}}</div>

        {{#likes like}}
            {{like}}
        {{/likes}}

        <div class="comment">
        <h3>댓글목록</h3>
        {{#if comment}}
            {{#each comment}}
                <div>{{@index}}번째 댓글 : {{this}}</div>
            {{/each}}
        {{else}}
            <div>댓글이 아직 없군요</div>
        {{/if}}
        </div>
    </li>
</script>	

• likes라는 커스텀 항목이 추가되었다.

likes helper

 Handlebars.registerHelper("likes", function (like) {
    if (like > 4) {
        return "<span>축하해요 좋아요가 " + like + "개 이상입니다!</span>";
    } else if (like < 1) {
        return "아직 아무도 좋아하지 않아요..";
    } else {
        return like + "개의 좋아요가 있네요";
    }
});