1. 참조

    1. 블로그: https://takeknowledge.tistory.com/38
    2. 공식 문서: https://handlebarsjs.com/

  2. 개요

    1. ajax로 가져온 데이터를 동적으로 추가해야 하는 상황에 사용
    2. 익숙하지 않은 경우 어려울 수 있음

  3. 기본적인 사용법

    1. 템플레이팅할 html을 세팅, 이때 바인딩할 부분은 {{property name}} 형태로 작성
    2. htmlTemplate을 가져온 후 Handlebars로 compile
    3. 컴파일한 템플릿에 데이터를 넣어줌, 이때 return은 html
    4. 리턴받을 html을 target에 innerHtml로 세팅

  4. 코드에서의 사용

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Handelbar</title>
</head>
<body>
	<ul id="commentUl">
	
	</ul>
	<!-- 1. 템플레이팅할 html을 세팅한다. 이때 데이터 바인딩 시킬 부분은 --> 
	<!--{{바인딩시킬 데이터의 프로퍼티명}} 의 형태로 적는다.  -->
	<script type="template" id="commentTemplate">
		<li class="list_item">
		  <div>
	      <div class="review_area">
	        <p class="review">{{comment}}</p>
				</div>
        <div class="info_area">
          <div class="review_info"> 
            <span class="name">{{name}}</span> 
          </div>
        </div>
      </div>
    </li>
  </script>
	<!-- 배열을 넣는 경우 #each를 사용해 배열명을 작성 -->
	<script type="template" id="commentTemplate">
    {{#each comments}}
    <li class="list_item">
        <div>
            <div class="review_area">
                <p class="review">{{comment}}</p>
            </div>
            <div class="info_area">
                <div class="review_info"> 
                    <span class="name">{{name}}</span> 
                </div>
            </div>
        </div>
    </li>
    {{/each}}
  </script>
  <script type="text/javascript" charset="utf-8">

        // 데이터
        var data = {
            comment : '굿' ,name : "초보" 
        }
      //2. htmlTemplate을 가져온후 Handlebars로 compile 한다.
       var commentTemplate = document.querySelector("#commentTemplate").innerHTML;
       var commentBindTemplate = Handlebars.compile(commentTemplate);

        //3. 컴파일한 템플릿에 데이터를 집어넣는다. 이 때 리턴값은 html로 나온다.
        var resultHtml = '';
        resultHtml += commentBindTemplate(data);

        // 4. 리턴받은 html을 target에 innerHTML로 세팅한다. 
        var commentUl = document.querySelector("#commentUl");
        commentUl.innerHTML = resultHtml; 
       
  </script>
</body>
</html>

  5. Helper사용

Handlebars.registerHelper('ifThirdOver', function(index, options) {
	if(index < 3) {
		return options.fn(this);
	} else {
		return options.inverse(this);
	}
)

{{#ifThirdOver @index}} 형태로 사용됨 띄어쓰기를 통해 파라미터 인식
options.inverse(this) === return false;
options.fn(this) === return true;

  1. 배열에서 배열을 사용하는 경우

    <script type="template" id="commentTemplate">
    {{#each comments}}
    {{#ifThirdOver @index}}
    <li class="list_item">
        <div>
            <div class="review_area">
                <h4 class="resoc_name">{{../displayInfo.0.title}}</h4>
                <p class="review">{{comment}}</p>
            </div>
            <div class="info_area">
                <div class="review_info"> 
                    <span class="name">{{name}}</span> 
                </div>
            </div>
        </div>
    </li>
    {{/ifThirdOver}}
    {{/each}}
	</script>

../을 통해 상위로 올라갈 수 있음