핸들바스 handlebars

핸들바스.js 파일을 js 폴더에 붙여넣기

common.jsp에 핸들바스.js 파일을 포함 시키기

보드리스.jsp에 적용시켜 보기/.....

<script id="entry-template" type="text/x-handlebars-template">
                                  <table>    
                                      <thead>
                                          <th>이름</th>
                                          <th>아이디</th>
                                          <th>메일주소</th>
                                      </thead>
                                      <tbody>
                                          {{#users}}
                                          <tr>
                                              <td>{{name}}</td>
                                              <td>{{id}}</td>
 
                                              {{!-- 사용자 정의 헬퍼인 email에 id를 인자로 넘긴다 --}}
                                              <td><a href="mailto:{{email id}}">{{email id}}</a></td>
                                          </tr>
                                          {{/users}}
                                      </tbody>
                                  </table>
                             </script>
 
                             <script type="text/javascript">
                                  //핸들바 템플릿 가져오기
                                  var source = $("#entry-template").html();
 
                                  //핸들바 템플릿 컴파일
                                  var template = Handlebars.compile(source);
 
                                  //핸들바 템플릿에 바인딩할 데이터
                                  var data = {
                                       users: [
                                              { name: "홍길동1", id: "aaa1" },
                                              { name: "홍길동2", id: "aaa2" },
                                              { name: "홍길동3", id: "aaa3" },
                                              { name: "홍길동4", id: "aaa4" },
                                              { name: "홍길동5", id: "aaa5" }
                                          ]
                                  };
 
                                  //커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
                                  Handlebars.registerHelper('email', function (id) {
                                    return id + "@daum.net";
                                  });
 
                                  //핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
                                  var html = template(data);
 
                                  //생성된 HTML을 DOM에 주입
                                  $('.normal_list').append(html);
 
                             </script>