[UI] handlebars.js

[UI] handlebars.js

우연히 SNS를 살펴보고 있다가 VIEW를 어떤 것을 사용하는지? 에 대한 글 아래로 답글이 달린 것 중에 thymeleaf, handlebars.js, freemarker 등이 올라왔다.

올해 확인하였을때는 backbon 뿐이었는데, 다양한 장점을 가진 UI Template Egene이 나타나고 있는듯하다.

그중 우선 handlebars를 우선 테스트 하였다. UI를 Javascript로 Front 단에서 처리하는 점이 마음에 들어서. 개인적으로 Front 코드를 Back 단에서 작성하는 점은 마음에 들지 않는다.

아래 작성한 내용 http://jsfiddle.net/nakanara/sbyoymy1/2/

1. handlebars 사용하기

• handlebars.js 내려받기
• https://github.com/wycats/handlebars.js/ GitHub

handlebars의 경우 jQuery 기반 위에 구성되어 있으므로 jQuery 필수.

2. UI를 구성할 템플릿 구현

<script id="list-friend-template" type="text/x-handlebars-template">

<h1>{{title}}</h1>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>제목</th>
      <th>DT</th>
    </tr>
  </thead>
  <tbody>
    {{#each list }}
    <tr>
      <td>{{fn_id}}</td>
      <td class="title">{{> list_link}}</td>
      <td>{{dt}}</td>
    </tr>
    {{/each}}
  </tbody>    
</table>
</script>

• {{}} 대괄호 안에 있는 property를 data에서 mapping 시켜서 보여준다.

• {{> partial name}} 반복되는 부분에 대해서 include처럼 사용할 수 있는 기능.

  Handlebars.registerPartial(‘list_link’, ‘{{title}}‘);

• {{function Name}} Function 만들어 사용할 수 있다.

  Handlebars.registerHelper(‘id_fn’, function(){
  return ‘[‘+this.id+’]’;
  });

3. JavaScript에서 UI 구성

// Partial 등록.
Handlebars.registerPartial('list_link', '<a href="/list/{{id}}">{{title}}</a>');

// Helper 등록. 
Handlebars.registerHelper('id_fn', function(){
   return '['+this.id+']';
});

// 추후 ajax 로 Data Call. >>
var data = {
    "title" : "List Page",
    list : []
};
for(var i=1; i < 10; i++) {
    data.list.push({"id": i, "title" : "TITLE ++ " + i , "dt" : "2015-07-08"});
}
// <<

// 1. ID로 템플릿 내용을 가져온다.
var source = $("#list-friend-template").html();
// Text로 템플릿을 구성하여도 됨.
// source = "<ul>{{#posts}}<li>{{link_to}}</li>{{/posts}}</ul>"

// 2. 템플릿을 컴파일 
var template = Handlebars.compile(source);

// 3. 템플릿에 데이터를 입력하여 결과물을 출력.
$('body').append(template(data));

---

나름 심도있게 테스트 해보려고 했는데… 이런 너무 막강하고 심플하여.. 글 작성하는데 더 시간이 걸린거 같다.
간단한 화면은 금방 구성할 수 있고, 난의도도 높지 않아서 접근성면에서도 꽤나 훌륭한거 같다.

위에서 언급한 thymeleaf, freemarker 의 경우 Java 라이브러리로 되어 있어서 아직 접해보지 않은 입장에서는 handlebars 가 더 마음에 든다.