블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 3. 16. 16:00 Backbone.js

SPA를 작성하게 되면 클라이언트 사이드의 템플릿엔진을 사용하게 된다. 많은 템플릿 엔진이 나와 있고 이중 핸들바에 대해서 알아보자 



1) Handlebar.js 소개 

  - 클라이언트 사이드 템플릿 엔진 성능 비교에서 핸들바의 위치 

  - 핸들바의 동작방식 소개 동영상

  


2) 핸들바 템플릿 만들기

  - 핸들바 스크립트 최신 다운로드 받고 <script> 코드 넣기 (jQuery 기본으로 넣음) 

<html>

<body>

  <script src="jquery.js"></script>

  <script src="handlebar.js"></script>

</body>

</html>


  - 템플릿 코드 작성하기 

    + <script> 테그를 사용하면 화면에 렌더링되지 않음

    + handlebar.js 가 사용하는 type임을 x-handlebars-template 명칭으로 준다

    + 컬렉션의 루프틑 # 으로 시작해서 / 로 끝남 == Code Less

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

 <table>

   <thead>

     <th>Username</th>

     <th>Real Name</th>

     <th>Email</th>

   </thead>

   <tbody>

     {{#users}}

       <tr>

         <td>{{username}}</td>

         <td>{{firstName}} {{lastName}}</td>

         <td>{{email}}</td>

       </tr>

     {{/users}}

   </tbody>

 </table>

</script>


  - jQuery를 이용하여 템플릿 핸들링하기 

<script>

          // 템플릿 해석

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

 var template = Handlebars.compile(source);

    // 데이터 

 var data = { users: [

     {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },

     {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },

     {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }

   ]};

          // div id=content-placeholder 에 결과 내역을 렌더링한다 

 $("#content-placeholder").html(template(data));

</script>


  - template 변수가 참조하는 펑션 내용

function (context, options) {

    if (!compiled) {

      compiled = compile();

    }

    return compiled.call(this, context, options);

  } 


  - content-placeholder div 태그 넣기 (<script> 태그보다 위에 놓는다)

<html>

<body>

<div id="content-placeholder"></div>


  <script src="jquery.js"></script>

  <script src="handlebar.js"></script>

.. 중략 ..


  - 전체 소스 코드 

  - 결과 화면 

  



4) 클라이언트 사이드 템플릿 엔진

  - Mustache -> Handlebar -> JsRender 순서로 발전해 왔음 

  - JsRender : MS가 차기 Office 에 공식 채택한 템플릿 엔진



** 테스트 소스 

handlebar.zip


<참조>

  - 원문 : Getting Start With Handlebar.js


posted by 윤영식