Handlebar.js 기본 정리

Handlebars.js

 

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

  <table>

      <thead>

          <th>이름</th>

          <th>아이디</th>

          <th>메일주소</th>

      </thead>

      <tbody>

          {{#each users}} 또는 {{#users}} --> users안에 있는 배열길이 만큼 도는 루프선언

          <tr>

              <td>{{name}}</td>

              <td>{{id}}</td>

              <td><a href="mailto:{{email}}">{{email}}</a></td>

                {{#if show}}

                    {{showItem}}

                {{else}} or {{^}}

                    {{notShowItem}}

                {{/if}}

              <td>

          </tr>

          {{/each}} 또는 {{/users}}

      </tbody>

  </table>

  </script>

 

 

//핸들바 템플릿에 바인딩할 데이터

var data = {

        users: [

            { name: "홍길동1", id: "aaa1", email: "aaa1@gmail.com", show: "true",showItem : "dd", notShowItem : "kk" },

            { name: "홍길동2", id: "aaa2", email: "aaa2@gmail.com" show: "false", showItem : "dd", notShowItem : "kk"},

            { name: "홍길동3", id: "aaa3", email: "aaa3@gmail.com" show: "true", showItem : "dd", notShowItem : "kk" },

            { name: "홍길동4", id: "aaa4", email: "aaa4@gmail.com" show: "false", showItem : "dd", notShowItem : "kk" },

            { name: "홍길동5", id: "aaa5", email: "aaa5@gmail.com" show: "true", showItem : "dd", notShowItem : "kk" }

        ]

};

 

//핸들바 템플릿 가져오기

var source = $("#entry-template").html();

 

//핸들바 템플릿 컴파일

var template = Handlebars.compile(source);

 

 

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성

var html = template(data);

 

//핸들바 {{#if문}}

if문은 true와 false로만 판단됨( if(a == 1) 불가)

if문을 판단하는 object가 true이면

{{showItem}}노출

if문을 판단하는 object가 false이면

{{notShowItem}}

 

//생성된 HTML을 DOM에 주입

$('body').append(html);

 

템플릿 설정부분 :   <script id="entry-template" type="text/x-handlebars-template">

 

데이터 바인딩 문법 : {{variable}}

String to Html 표현 렌더링(데이터가 html태그로 표현되어야한다면) : {{{variable}}}

공백제거 문법 : {{~variable}}