Javascript Template – Handlebar.js

Handlebar

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

간단한 How to

1 handlebar.jsjquery를 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

Published by

JayJin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 먹방을 사랑하는 망고장스터

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s