클라이언트 템플릿 엔진 Handlebars.js.

웹 어플리케이션 제작에 AJAX 응답 처리 빈도가 상당히 높아지고 있다.
하지만 JavaScript만으로 응답 결과를 화면에 드로잉 하는것은 스크립트내에서 잦은 HTML 수정을 야기하며, 코드량도 많아지고, 분기 처리가 까다로울때가 많다. 이러한 응답 처리를 보다 효율적으로 개발할 수 있도록 헬퍼 역할을 하는것이 클라이언트 템플릿 엔진이다.
그 중 대중화가 많이 되어있는 Handlebars.js를 소개 합니다.

1. Handlebars.js 스크립트를 로드 합니다.
      <script src="https://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
2. 기본 구성

□ JSON 데이터를 출력할 템플릿을 준비합니다.

□ jQuery를 사용해 body에 템플릿 출력하기.

      var source = $("#entry-template").html()  // 템플릿 HTML을 변수에 할당.
        , template = Handlebars.compile(source) // HTML source를 Compile하여 Template변수에 할당.
        , data = {title: "My New Post", body: "This is my first post!"};

      $('body').html(template(data));
결과 보기

3. each 헬퍼 활용하여 테이블 그리기

□ 테이블 그리기 템플릿 준비

□ 테이블 출력 하기 (data는 Ajax로 응답 받아온 결과라고 가정하세요)

      var source = $("#list-template").html()
        , template = Handlebars.compile(source)
        , data = {
          list: [
            {name: "최재희", email: "jaehee-choi@rsupport.com", address: "성남"},
            {name: "박정식", email: "jspark@rsupport.com", address: "성남"},
            {name: "이연희", email: "yhlee@rsupport.com", address: "인천"},
            {name: "송영진", email: "yjsong@rsupport.com", address: "서울"},
            {name: "김아름", email: "arkim@rsupport.com", address: "서울"},
            {name: "김소영", email: "soyoung-kim@rsupport.com", address: "파주"}
          ]
        };
      
      $('#list-result').html(template(data));

□ 테이블 출력 결과

4. if 헬퍼 사용해서 분기하기

□ 데이터 값 여부에 따라서 값을 노출하거나, "데이터가 없습니다." 출력할 템플릿 준비.

□ 테이블 출력 하기 (data는 Ajax로 응답 받아온 결과라고 가정하세요)

      var source = $("#no-data-template").html()
        , template = Handlebars.compile(source)
        , data = {
          list: []
        };
      
      $('#no-data-list-result').html(template(data));

□ 테이블 출력 결과

5. 자유롭게 헬퍼 추가하기

기본적으로 제공되는 헬퍼로 만족하지 못하는 경우 헬퍼를 등록하여 사용할 수 있습니다.
한가지 예로 기본적으로 제공되는 if는 값의 비교는 되지 않기 때문에 값을 비교 할 수 있는 if_eq 헬퍼를 추가하도록 하겠습니다.


□ Handlebars.registerHelper('헬퍼명', callback)으로 Handlebars.compile() 전에 헬퍼를 등록합니다. 

      // Handlebars.compile 전에 등록 해줍니다.
      Handlebars.registerHelper('if_eq', function(a, b, opts) {
        if(a == b) {
          return opts.fn(this);
        } else {
          return opts.inverse(this);      
        }
      }); 
      
      var source = $("#ifeq-template").html()
        , template = Handlebars.compile(source)
        , data = {
          list: []
        };
      
      $('#ifeq-result').html(template(data));

□ 등록한 if_eq를 사용하여 name값 비교하여 class="orange" 추가하기.

□ 테이블 출력 결과

History