잡동사니에도 사랑을

[21.10.25] exam03(03_json) - Template 플러그인 예제(jquery-tmpl 이용) 본문

JAVA_EE/AJAX

[21.10.25] exam03(03_json) - Template 플러그인 예제(jquery-tmpl 이용)

luvforjunk 2021. 10. 25. 13:23
728x90
반응형

Template 플러그인과의 연계

 


- Template 플러그인은 동적으로 생성하고자 하는 요소를 미리 HTML 틀을 정의해 둔 후, 
  그 안의 적용할 내용을 JSON 데이터로 처리하는 jQuery 플러그인이다.
- Ajax를 사용하면 원격지의 JSON 데이터를 페이지 이동 없이 로드 해 올 수 있다.
- 이때 Ajax로 로드한 JSON 데이터의 구조와 템플릿에 정의되어있는 치환자들이 동일하다면, 
  바로 데이터를 전달받아 동적 요소를 생성하여 화면에 출력하도록 구성할 수 있다.

 

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

 

 

 

다운로드 


- 사이트 : https://github.com/BorisMoore/jquery-tmpl

 

GitHub - BorisMoore/jquery-tmpl: The original official jQuery Templates plugin. This project was maintained by the jQuery team a

The original official jQuery Templates plugin. This project was maintained by the jQuery team as an official jQuery plugin. It is no longer in active development, and has been superseded by JsRende...

github.com

 

 

 

→ jquery-tmpl-master.zip 다운로드 받기
→ jquery.tmpl.min.js를 사용하면 된다.
→ 플러그인 참조 코드 추가

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

 

 

//<style>

더보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
table {
display: block;
width: 100%;
font-size: 14px;
text-align: center;
}

table tr:after {
content: '';
display: block;
float: none;
clear: both;
}

table .left {
text-align: left;
}

thead, tbody, tr {
display: block;
width: 100%;
}

td, th {
display: block;
float: left;
padding: 10px 0;
}

table thead {
border-bottom: solid 2px #285E8E;
font-weight: bold;
}

table tbody tr {
border-bottom: 1px dotted #ccc;
}

.example table .no {
width: 10%;
}

.example table .subject {
width: 60%;
}

.example table .hit {
width: 10%;
}

.example table .date {
width: 20%;
}
</style>
</head>

 

 

 

////////exam03.html

//----------------중략------------------
<body>
<!-- 게시판 제목 -->
<h1 class="title"></h1>

<!-- 게시판 설명 -->
<div class="exec"></div>

<div class="exec">
	<!-- 게시물 수 -->
	총 게시물 수: <span></span>개
</div>
<div class="example">
   <table>
      <thead>
         <tr>
            <th class="no">번호</th>
            <th class="subject">제목</th>
            <th class="hit">조회수</th>
            <th class="date">작성일시</th>
         </tr>
      </thead>
      <tbody>
         <!-- 목록 -->
      </tbody>
   </table>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.tmpl.min.js"></script>

<!--템플릿으로 사용할 HTML태그 -->
<script id="itemTemplate" type="text/x-jqeury-tmpl">
	<tr>
		<td class="no">${no}</td>
		<td class="left subject">${subject}</td>
		<td class="hit">%{hit}</td>
		<td class="date">%{date}</td>
	</tr>
</script>
<!-- 템플릿 끝 -->	
<script type="text/javascript">
$(function(){
	$.get('../json/bbs.json', {}, function(data){
		
		// 직접 꺼내오기(데이터 동적으로 받기)
		$('.title').html(data.title);
		$('.exec:eq(0)').html(data.description); // class가 두개이므로 첫번째값에만 넣고 싶으면 :eq() 를 써줘야
		$('.exec:eq(1) > span').html(data.total);
		
		// item은 배열로 잡혀있으므로 for문으로 잡아야 하나? 
		// 틀을 잡아놨으므로 같은 이름끼리 매핑하기 때문에 for문 돌릴 필요 없다
		var tmpl = $('#itemTemplate').tmpl(data.item);
		
		// 화면에 출력
		$('div.example > table > tbody').append(tmpl);
	
	});
});
</script>
</body>
</html>

*주요 내용 :

→ template : 반복시킬 문자나 HTML 코드가 위치하는 자리

→ data : template에 바인딩 될 데이터

 

 

 

 

////////bbs.json

 

 

 

////////bbs.jsp

더보기

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>

{
"title": "Javascript + jQuery + Ajax 완벽가이드",
"description": "Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
"total": 4,
"item": [
{
"no": "공지",
"subject": "'Javascript + jQuery + Ajax 완벽가이드' 강의 자료실 입니다.",
"hit": 3,
"date": "2018.01.29"
},
{
"no": 3,
"subject": "Javascript + jQuery + Ajax 완벽가이드 3일차 강의자료 입니다.",
"hit": 6,
"date": "2018.02.08"
},
{
"no": 2,
"subject": "Javascript + jQuery + Ajax 완벽가이드 2일차 강의자료 입니다.",
"hit": 15,
"date": "2018.02.07"
},
{
"no": 1,
"subject": "Javascript + jQuery + Ajax 완벽가이드 1일차 강의자료 입니다.",
"hit": 19,
"date": "2018.02.05"
}
]
}

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.25] exam02(03_json) - JSON 배열  (0) 2021.10.25
[21.10.25] exam01(03_json) - JSON 개념 정리 및 예제  (0) 2021.10.25
[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces  (0) 2021.10.21
[21.10.20] exam04(02_xml)  (0) 2021.10.20
[21.10.20] exam03(02_xml)  (0) 2021.10.20
'JAVA_EE/AJAX' Related Articles more