달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'template'에 해당되는 글 1

  1. 2013.06.12 JavaScript 정규 표현식을 이용한 템플릿

내부적으로 사용할 코드 만들면서 정리합니다.


사용법부터 보면 아래와 같습니다.

아래와 같이 템플릿 코드가 보여줄 태그를 설정하고

<tbody id="showList">

</tbody>


기본 템플릿 코드를 아래와 같이 설정한다.

<script id="listTemplate" type="text/x-lucky-template">

<tr>

<td><a href="merong.jsp">{{name}}</a></td>

<td>{{tel}}</td>

<td>{{address}}</td>

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

<td>{{age}}</td>

</tr>

</script> 

데이터와 매핑시키는 부분은 {{name}} 형식과 같이 필드명의 왼쪽에 {{, 오른쪽엔 }} 를 붙여준다.

실제 사용은 아래와 같이 한다.

var listData = [

{

"name" : "lucky",

"tel" : "010-1111-1234",

"address" : "서울",

"email" : "mail@mail.com",

"age" : "10"

},

{

"name" : "lucky2",

"tel" : "010-1111-1234",

"address" : "서울",

"email" : "mail@mail.com",

"age" : "100"

}

];

var codes = $("#listTemplate").html();

Template.render(codes, listData, "showList");


구현 소스는 아래와 같습니다.

Template = new function() {

this.tplTagRegExp = /\{\{[a-zA-Z0-9]*\}\}/gi;

};


/**

 * 화면에 list template 을 그림

 * 

 * @param {String} templateCode HTML 코드 작성용 템플릿 코드

 * @param {Object} mappingData 템플릿 코드에 매핑시킬 데이터 객체

 * @param {String} showId 데이터가 매핑된 템플릿 코드를 뿌려줄 화면 객체의 ID

 */

Template.render = function(templateCode, mappingData, showID) {

var codes = "";

for(var i = 0 ; i < mappingData.length ; i++ ) {

var rowData = mappingData[i];


var tmpStr = templateCode.replace(this.tplTagRegExp, function($1) {

var tag = $1.substring(2, $1.length-2);

var data = rowData[tag];

if( data ) {

return data;

} else {

return "";

}

});

codes += tmpStr;

}


$("#" + showID).append(codes);

};


정규표현식과 javascript 는 참 재밌습니다.

근데, 어렵습니다. ㅡㅡ;


:
Posted by 뽀기