[Handlebars] 사용법

https://handlebarsjs.com/

 

1. HTML 파일내에서 사용하기

HTML 파일내에서 Handlebars 템플릿 양식을 생성하려면 아래와 같이 script 태그를 이용하여 생성하면된다. 템플릿 식별을 위하여 id 속성을 사용한다.

<script id="template_id" type="text/x-handlebars-template">
    <div>
        <h1>{{key1}}</h1>
        <p>{{key2}}</p>
    </div>
</script>

<script>
    var template_html = $("#template_id").html();
    var template = Handlebars.compile(template_html);
    var item = {
        key1: value1,
        key2: value2
    };
    $("#parent_id").append(template(item));
</script>

 

2. 외부 템플릿 파일(hbs)로 사용하기

템플릿 양식을 HTML 파일내에서 생성하지 않고 외부의 Handlebars(hbs) 파일을 생성할 수도 있다.

{{!-- template.hbs --}}
<div>
    <h1>{{key1}}</h1>
    <p>{{key2}}</p>
</div>

생성한 템플릿은 파일은 아래와 같이 ajax를 이용하여 접근할 수 있다.

let template_file = "./hbs/template.hbs";
$.ajax(template_file).done(function (template_html) {
    var template = Handlebars.compile(template_html);
    $('#parent_id').append(template(item));
});