jsp파일에서 jquery의 template를 사용한 데이터 바인딩

jquery의 template은 무엇인가?

templat의 사전적 의미부터 확인해 보겠습니다. 

template 

 

1. 형판(形板)   2. 견본, 본보기

'형판'이라는 뜻으로, 어떤 모양을 만들 때에 사용하기 위하여 일정한 모형을 새겨 만드는 널빤지라는 뜻을 가지고 있습니다.

jQuery의 template Plugin도 웹 코드상에서 일종의 형판과 같은 역할을 합니다. 일정한 패턴을 가진 코드와 데이터가 반복될 때, 반복되는 코드의 구조를 template로 따로 관리하여 재사용을 할 수 있도록 도와줍니다. 

Template Plugin 다운로드 방법

 파일은 https://github.com/BorisMoore/jquery-tmpl 에서 다운이 가능합니다. 

Clone or download 버튼을 누른뒤 Donwload ZIP버튼을 누르면 화면에 보여지는 파일들을 다운 받을 수 있습니다.

다운 받은뒤 프로젝트의 js폴더들이 위한 곳으로 jQuery관련 js파일들을 이동합니다.

사용하고자하는 파일에 아래와 같은 script를 추가해줍니다.

<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tmpl.js"></script>

Template 사용법

jQuery.tmpl( template [, data] [, options] ) 혹은 $.tmpl( template [, data] [, options] ) 로 표현이 가능합니다.

• template    - 반복시킬 문자나 HTML 코드가 위치하는 자리입니다.
• data          - template에 바인딩될 데이터 입니다.
• options      - 선택적인 맵(키-값)을 입력 가능한 공간으로, template이 만들어지는 동안에   data를 확장 시킬수 있습니다.

※ option의 설명은 https://github.com/BorisMoore/jquery-tmpl 내용을 직접 해석한 내용입니다.  오역이 있을 수 있습니다.

같이 사용할 수 있는 jquery 함수

//appendTo(target)     - target의 영역안의 끝부분에 위치됩니다.
$.tmpl("<li>${company}</li>" , {"compnay": "회사3"}).appendTo("#companyList");

//prependTo(target)    - target의 영역안의 시작부분에 위치됩니다.
$.tmpl("<li>${company}</li>" , {"compnay": "회사2"}).prependTo("#companyList");

//insertAfter(target)     - target의 영역밖에서 해당 target 바로 다음에 위치됩니다.
$.tmpl("<li>${company}</li>" , {"compnay": "회사1"}).insertAfter("#companyList");

//insertBefore(target)   - target의 영역밖에서 해당 target 바로 앞에 위치됩니다.
$.tmpl("<li>${company}</li>" , {"compnay": "회사4"}).insertBefore("#companyList");

1. .tmpl() :  템프릿 소스를 가지고 있는 객체에 체인 형식으로 사용.

<script id="companyTemplate" type="text/html">
    <li>${company}</li>
</script>

var datas = [ 
              {"compnay": "회사1"}
            , {"compnay": "회사2"}
            , {"compnay": "회사3"}
            ]
// companyTemplate에 datas객체에 있는 데이터를 바인딩하여 companyList공간안 제일 뒷부분에 소스를 추가합니다
$("#companyTemplate").tmpl(datas).appendTo("#companyList");

2. $tmpl() :  HTML 요소를 $tmpl의 첫번째 요소로 문자열로 바로 넣거나, template() 함수를 이용하여 사용할수 있습니다.

2-1 문자열을 이용하는 법

var datas = [  {"compnay": "회사1"}
            , {"compnay": "회사2"}
            , {"compnay": "회사3"}
            ]
// HTML 요소를 직접 스트링으로 적어서 사용
$.tmpl("<li>${company}</li>" , datas).appendTo("#companyList");

// HTML 요소를 변수에 저장해서 사용
var templateStr = "<li>${company}</li>"
$.tmpl(templateStr ,datas).appendTo("#companyList");

2-2 template함수를 사용하는 법

<script id="companyTemplate" type="text/html">
    <li>${company}</li>
</script>
var datas = [  {"compnay": "회사1"}
            , {"compnay": "회사2"}
            , {"compnay": "회사3"}
            ]

// 템플릿 소스를 가진 객체를 지정해 템플릿 이름을 부여
$("#companyTemplate").template("companyTmpl");
$.tmpl("companyTmpl" , datas).appendTo("#companyList");

// template함수에 부여할 템플릿이름과 사용할 코드를 직접 입력
$.template("companyTemp","<li>${company}</li>");
$.tmpl("companyTemp",datas).appendTo("#companyList");

3 .tmplItem & $.tmplItem

 tmplItem은 template를 이용해 만들어지 코드의 데이터에 접근할수 있도록 해주는 함수입니다.

<script id="companyTemplate" type="text/html">
    <li>${company}</li>
</script>
var datas = [  {"compnay": "회사1"}
            , {"compnay": "회사2"}
            , {"compnay": "회사3"}
            ]

$.template("companyTemp","<li>${company}</li>");
$.tmpl("companyTemp",datas).appendTo("#companyList");

// 템플릿의데이터 접근
var lastTmplItem= $("div li:last").tmplItem();
// 템플릿의 데이터 가져오는 방법
var itemData = lastTmplItem.data
// 템플링싀 노드를 가져오는 방법
var itemNode = lastTmplItem.node;
console.log("company : " + itemData.company );

얼마 전 바보 같은 실수를 해서 몇 시간을 낭비한 일이 있어 이 글에 첨부합니다.

JSP 파일에서 template로 selectbox를 만드는 작업을 하였는데, 템플릿에 데이터가 반영이 되지 않았습니다.

이유는 JSP 파일에서 '$'문자를 EL로 인식하기 때문입니다.

템플릿 소스를 js파일로 따로 분리하지 않고, jsp파일에서 사용할 경우 $앞에 \를 추가하여 \$로 사용을 해주어야 데이터를 읽어와 화면에 보여줄 수 있습니다.

참고

https://github.com/BorisMoore/jquery-tmpl

http://weblogs.asp.net/hajan/jquery-templates-in-asp-net-introduction

http://weblogs.asp.net/hajan/jquery-templates-tmpl-tmplitem-and-template

http://helpcenter.epages.com/Doc/ver_6_12_3/epages/jQuery/api-jQuery.tmplItem.html

http://blog.naver.com/loudon23/30096650420