2012년 5월 30일 수요일

Handlebars 사용법

Meteor.js 는 기본 템플릿으로 Handlebars 를 사용한다.
{ 기호가 자전거 핸들처럼 생겨서 그런 이름이라나.
같은 이유로 Mustache 도 { 를 사용한다.

간단하게 사용법을 보자.

- 1. Template
{{>tempate명}}

<template name="tempate명">
.....
</template>

- 2. Expression
{{expression}}

- 3. Expression with HTML

{{{expression}}}
2와 차이점은 href나 embed 등 html 태그를 사용할 수 있음.

- 4. Block - Iteration (expression 이 array 일때)
{{#each expression}}
...
{{/each}}

- 5. Block - JSON (expression 이 JSON Object 일때)
{{#with expression}}
...
{{/with}}

- 5. Block - Condition (expression 이 참일 때 실행)
{{#if expression}}
...
{{else}}
...
{{/if}}

-6. Helper 
{{helper-name expression}}

ex)
first name : {{user.firstName}}
last name : {{user.lastName}}
full name : {{fullName user}}

Handlebars.registerHelper('fullName', function(user) {
  return user.firstName + ', ' + user.lastName;
});

-7. Helper with HTML
Handlebars.registerHelper('fullName', function(user) {
  return new Handlebars.SafeString(user.firstName + ', ' + user.lastName);
});

특히 Helper를 사용하면 템플릿과 Javascript(혹은 Coffeescript) 양쪽 다 깨끗한 코드를 유지하는데 도움이 된다.