[handlebarsjs] simple templating language

'이번주 학교 시간표 서비스'는 여러 페이지가 존재하긴 하나 기본적으로 SPA(Single Page Application)으로 구성할 예정이다.

사용자 요청에 따른 적절한 API를 비동기로 호출한 이후

응답을 적절한 html 문자열로 변환 후, 적절한 DOM 위치에 추가해 줘야 하기 때문에

응답 데이타를 보여줄 html 템플릿이 생성해 주는 방법으로 handlebarsjs를 사용하기로 했다.

 

https://handlebarsjs.com/

Handlebars

어플리케이션의 크기가 크면

handlebars를 사용하기 위해 알아야 하는 다양한 expression도 알면 좋지만,

템플릿 내에서 간단히 반복문, 조건문 정도만 필요한 정도라 해당 helper의 대한 기능은 따로 정라하기로 하고

여기서는 template을 가져오는 간단한 방법에 대해서 알아보자.

 

// compile the template
var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
// execute the compiled template and print the output to the console
console.log(template({ doesWhat: "rocks!" }));

 

위 코드는 handlebars 홈페이지에 소개된 가장 간단히 템플릿을 사용하는 방법이다.

코드를 보면 알 수 있듯이, Handlebars.compile 함수에 들어갈 템플릿을 동적으로 가져올 수 있는 방법이 필요하다.

 

내가 사용한 방법은 ajax로 템플릿 파일을 가져오는 방법을 사용했다.

템플릿들을 페이지 랜딩 시 로딩되는 스크립트에 미리 포함시켜 둘 수 있도 있겠지만, 최소한의 자원과 efforts로 웹서비스를 만드는 것이 목표이기 때문에 가장 간단한 방법만으로도 충분하다.

 

// How to call applyTemplateAjax 
applyTemplateAjax('./tmpl/school-list.hbs', $('#schoolListWrapper'), res.schoolInfo[1].row, bindEventForSchoolList);

function applyTemplateAjax(path, $wrapper, data, callback) {
    $.ajax({
        url: path,
        success: function (res) {
            var tmpl = Handlebars.compile(res);
			$wrapper.html(tmpl(data));
			hideAllResults();
			$wrapper.show();
			if (callback) {
				callback(data);
			}
        }
    });
};