Javascript Template – Handlebar.js

Handlebar

• Mustache계열 템플릿
• 사용할 수 있는 제어가 매우 한정적
• template 레이아웃 기능 지원
• helper라는 기능으로 여러가지 커스터마이징 제공

간단한 How to

1 handlebar.js와 jquery를 html에 추가한다.
2 html에 원하는 템플릿을 id와 함께 추가한다.(handlebar.js 밑에)

<script id="todo-template" type="text/x-handlebars-template">
    <li class="{}">
        <div class="view">
            <input class="toggle" type="checkbox" {}>
            <label>{{todo}}</label>
            <button class="destroy"></button>
        </div>
    </li>
</script>

3 javascript에 코드를 써준다.

var source   = $("#todo-template").html();
var template = Handlebars.compile(source);
var data = { todo : $('#new-todo').val()};
$("#todo-list").append(template(data));

Refer

javascript micro templating
handlebar js
handlebar 간단한 사용법
handlebar js tutorial
Javascript Template 사용 가이드

Advertisements