[FE] 04. handlebar를 활용한 템플릿 작업

<4. handlebar를 활용한 템플릿 작업>

* handlebar

자바스크립트 템플릿 라이브러리

(설치 주소) https://cdnjs.com/libraries/handlebars.js/

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js

1. html에 다음과 같이 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>	

javascript에서는 replace로 치환하는 방법 말고, 라이브러리를 사용해서 결과를 얻을 수 있음

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

Handlebars.compile : 함수를 반환한다, replace없이 알아서 실행

구분하는 대상은 {{ }} : 이렇게 되어있는 것을 전부 다 파싱하는 것

2. 데이터를 추가

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

bindTemplate(v);

3. bindTemplate(data); 로 출력해보기

---

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

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

bindTemplate(v);

each

@를 사용하면 for문에서 i를 사용했던 것처럼 접근할 수 있다. (일종의 매개변수)

<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" : ["댓글이다", "멋진글이네요", "잘봤습니다"]}
];

실제 데이터는 좀 더 많으므로 반복적으로 결과를 합치는 게 좋다.

- reduce 사용해보기

reduce는 재귀함수와 비슷하게 동작

루프를 돌면서 bindTemplate을 실행했음

(#은 handleBar문법에서 제공하는 하나의 Syntax임)

* 조건 상황에 따른 처리

지금 예제에서 댓글이 없는 경우에는 다른 메시지를 처리해야 한다면 : handlebar

template은 말 그대로 고정되어 있는 것 이지만 handlebar에서는 이를 지원함

<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>

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

---

* helper

Help function : 사용 좀 더 다양한 상황을 처리해야 한다면, help function을 통해서 처리할 수도 있다.

조금 더 상황에 맞춰서 조건에 따라 다른 결과를 보여줄 때 (복잡한 처리가 가능)

- 좋아요 갯수가 5개 이상이면 "축하해요. 좋아요가 5개이상 입니다"라는 문자열을 추가해보기

1. likes라는 커스텀 항목을 추가

<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>	

2. 다양한 조건을 설정하는 likes helper 만들기

handleBar에 있는 registerHelper 메소드 사용

likes에 해당하는 것들을 동작하도록 만든다 (#likes를 만났을 때 이 함수를 실행시킨다 => 실행 후 html 문자열을 반환시킴)

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

이와 같이 Helper 함수는 템플릿 처리를 좀 더 유연하게 처리할 수 있게 돕는다.