[Ajax] 20. Ajax jsRender 템플릿 분리하기

1. jsRender와 jsviews 소개

- 이전에 실습한 부트스트랩 테이블 예제는 가독성이 떨어짐

- 테이블 만드는게 훨씬 편해짐

웃는하루의 블로그 :: jsrender, jsviews 소개 및 사용법 (ko-kr.net)

jsrender, jsviews 소개 및 사용법

최근 자바스크립트에서도 MVC 모델이 주목을 받으면서, AngularJS가 주목을 받고있다. 하지만 대부분의 웹사이트는 이러한 MVC 모델로 설계되지 않아 개발 상에서 적용이 힘든 경우가 많다. 개발자

blog.ko-kr.net

2. 실습 - jsRender

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jsrender.js"></script>
<title>Ajax 사용 - GET방식</title>
<style>
	table {
		width : 400px;
		border : 1px solid black;
		border-collapse : collapse; 
	}
	
	td, th {
		border : 1px solid black;
		text-align : center;
	}
	
	table > thead > tr {
		color : yellow;
		background-color : purple;
	}
</style>
</head>
<body>
	<table id="list">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>전화번호</th>
				<th>주소</th>
			</tr>
		</thead>
		
		<!-- UI가 출력될 영역 -->
		<tbody id="container">
		</tbody>
	</table>
	
	<!-- 1) 데이터 영역
					- 서버로부터 JSON 데이터 가져오기
					- 데이터와 viewTemlate을 결합하여 UI영역에 표출 
	-->
	<script>
		$(document).ready(function() {
			$.get("/contact/list.do", function(data) {
				var obj = JSON.parse(data); //서버로부터 응답받은 데이터 -> JSON 객체로 변환
				var tmpl = $.templates("#contact_template"); //veiwTemplate 영역 변수로 선언
				var str = tmpl.render(obj.contacts); //데이터 + viewTemplate = html UI
				/*
				<tr>
					<td>64</td>
					<td>홍길동</td>
					<td>010-1111-2222</td>
					<td>율도국</td>
				</tr>
				<tr>
					<td>63</td>
					<td>임꺽정</td>
					<td>010-1111-2222</td>
					<td>장길산</td>
				</tr>
				..........
				*/
				console.log(str);
				$("#container").html(str);
			});
		});
	</script>
	
	<!-- 2) viewTemplate영역(데이터가 들어오면 표현될 UI 템플릿) -->
	<script id="contact_template" type="text/x-jsrender">
		<tr>
			<td>{{:no}}</td>
			<td>{{:name}}</td>
			<td>{{:tel}}</td>
			<td>{{:address}}</td>
		</tr>
	</script>
</body>
</html>

3. 실습 - 다이얼로그(모달)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.js"></script>
<title>Ajax 사용 - GET방식</title>
<style>
	body {
		font-size : 75%;
	}
	
	input.text {
		margin-bottom : 12px;
		width : 95%;
		padding : .4em;
	}
</style>
</head>
<body>
	<!-- 다이얼로그(모달) 창에 표현할 구성 요소들 -->
	<div id="dialog-new" title="새 연락처 추가하기">
		<form>
			<label for="name">이름</label>
			<input type="text" id="name" name="name" 
					class="text ui-widget-content ui-cornet-all">
			<label for="tel">전화번호</label>
			<input type="text" id="tel" name="tel" 
					class="text ui-widget-content ui-cornet-all">
			<label for="address">주소</label>
			<input type="text" id="address" name="address" 
					class="text ui-widget-content ui-cornet-all">
		</form>
	</div>
	<button type="button" id="addBtn">추가</button>
	<script>
		$(document).ready(function() {
			//다이얼로그(모달) 창 영역 숨김 처리
			$("#dialog-new").dialog({
				autoOpen : false,
				modal : true
			});
			
			$("#addBtn").click(function() {
				//다이얼로그(모달) 창 구성 부분
				$("#dialog-new").dialog({
					//설정 값 지정 영역
					modal : true, 
					buttons : { //원하는 버튼 추가 가능
						"저장" : function() {
							$(this).dialog("close"); //다이얼로그가 꺼지면서
							alert("저장 완료"); // 알림창뜨게함
						},
						"취소" : function() {
							$(this).dialog("close");
						}
					}
				});
				//다이얼로그(모달) 창 오픈 메소드
				$("#dialog-new").dialog("open");
			});
		});
	</script>
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글

[Ajax] 21. Contact Application 만들기 (0)	2021.10.07
[Ajax] 19. Ajax 제이쿼리 플러그인 (0)	2021.10.06
[Ajax] 18. 기타 메소드 (0)	2021.10.06
[Ajax] 17. Ajax 전역 이벤트 함수 (0)	2021.10.06
[Ajax] 16. 헬퍼 함수 (0)	2021.10.06