JavaScript 라이브러리(handlebar)를 사용한 templating작업 사용하기

1. handlebar를 설치해야한다.

 

 - 구글에 handlebar cdn 검색 (https://cdnjs.com/libraries/handlebars.js/) 에 접속한다.

 

나는 로컬 서버에 사용할 것이기 때문에 주황색으로 표시 된 url을 script type으로 복붙한다.

 

 

2. handler를 이용해 템플릿을 컴파일 한 뒤 데이터 삽입한다.

 

<script type="myTemplate" id="reviewTemplate">

id가 reviewTemplate인 template를 가져다 사용할 것이다.

 주의할 점 - 데이터가 들어갈 자리는 대괄호 두개로 묶여한다.

 예 : id : {{id}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    
    <script>
    	var template = document.querySelector("#reviewTemplate").innerText;
    	var bindTemplate = Handler.compile(template);
        var resultHTML = bindTemplate(data);
    </script>

selector 를 이용해 이용할 id의 innerText를 가져온다. 그리고 컴파일 해준 뒤 데이터를 넣는다.

 

 

참고자료: https://www.edwith.org/boostcourse-web/lecture/16784/