본문 바로가기

javascript

JavaScript Template Engine - Handlebars

JavaScript Template Engine - Handlebars


반대로 Server Side Template Engine이라고 할 수 있다.


구글링으로 javascript template engine 순위를 보니 2016년 1위가 Mustache 2위가 포스팅하고자 하는 Handlebars다.


Handlebars는 Mustache에 헬퍼개념을 도입한 Mustache 확장형 템플릿이라고 생각하면 되겠다.


머 대개 거창하게 들리지만 Handlebars 템플릿이 하는 건 반복작업 즉 루핑돌면서 각각 알맞게 대입 시켜주는 것이라고 생각하자.


먼저 Handlebars template을 사용하기 위해서는 jQuery라이브러리가 필요하다.


예제 1) 

- 대입하여야 할 변수는 {{ }}에 쌓여있다. {{대입하여야 할 변수}}

- 하이라이트 된 부분이 루핑에 관련된 부분인다.

- {{#변수}} ~ {{/변수}} 이런 형태를 섹션이라 칭하는데 변수가 배열이면 루핑을 그렇지 않으면 조건문으로 인식된다. 

- 예제2 기준으로 {{#each contents}}가 정식이라고 할 수 있다. 



예제 2)

- 예제 1)은 데이터가 Map형식이고, 예제 2)는 JSON형태이다.

- 예제 1처럼 'contents' 키값이 없을 경우는 {{#each}} ~ {{/each}}를 통해서 루핑을 돌릴 수 있다.


예제 3)

- 예를 들어 '<' ,  '>' 는 이스케이프 문자이다.

- 이스케이프 문자 처리는 {{{ }}}으로 처리해야한다.

- 아래 이미지는 실행 결과 캡쳐화면이다.



예제 4)

- 예제1을 설명하면서 {{#변수}} ~ {{#변수} 에서 변수가 배열이면 루핑을 그렇지 않으면 조건문이라고 표현했다.

- 변수가 false이면 실행되지 않는다.

- 변수가 0이면 실행되지 않는다. (결과는 실행됨)

- 변수가 빈문자열이면 실행되지 않는다. (결과는 실행됨)

- 테스트한 결과 원하는데로 출력되지 않았음.

- 변수가 false가 아닌 경우는 조건문으로 사용하지 않는게 좋겠음.

- 간단한 if else문이 따로 존재하니 그걸 사용하는게 좋겠음.


 

예제 5)

- 사용자 정의 헬퍼

- 사용자 정의 헬퍼는 Handlebars.registerHelper("헬퍼함수이름", function(변수,변수) {.....});

- 사용자 정의 헬퍼가 출력라인 보다 뒤쪽에 위치할 경우 에러가 날 수 있다. 아마도 정의헬퍼를 인식하기전 사용할려고 하는 것 같음.


예제 6)

- Handlebars 부분 템플릿

- 공통으로 사용할만 한 부분을 부분 템플릿화 할 수 있다.

- 부분템플릿 위치는 {{>부분템플릿명}} 사용한다.

- Handlebars.registerPartial("부분템플릿명",부분템플릿내용);

- 부분템플릿을 다른 .js파일에 놓아서 공통으로 사용할 수 있다.



소스파일 첨부 : 

handlebars.zip


'javascript' 카테고리의 다른 글

JSON.parse, JSON.stringify  (0) 2016.08.17
서버 Dara Call  (0) 2016.08.17
JSDT 설치  (0) 2016.08.11
Node.js 이용해서 간단한 CRUD 만들기  (0) 2016.08.05
Node.js - 자바스크립트 기반 서버사이드 플랫폼  (0) 2016.08.04