Web, Template 다운로드 사용하기

Template

 

Template 플러그인은 동적으로 생성하고자 하는 요소를 미리 HTML 틀을 정의해 둔 후, 
그 안의 적용할 내용을 JSON 데이터로 처리하는 jQuery 플러그인이다.

 

Ajax를 사용하면 원격지의 JSON 데이터를 페이지 이동 없이 로드 해 올 수 있다.

이때 Ajax로 로드한 JSON 데이터의 구조와 템플릿에 정의되어있는 치환자들이 동일하다면, 
바로 데이터를 전달받아 동적 요소를 생성하여 화면에 출력하도록 구성할 수 있다.

 

 JSP 파일에서 작업을 하면 EL표현식과 충돌이 난다.

 

<script id="itemTemplate" type="text/x-jquery-teml">

<h1>${message}</h1>

</script>

=> 그래서 JSP 파일에서는 반드시 ""를 붙여서 사용을 해야 한다.

<script id="itemTemplate" type="text/x-jquery-teml">

<h1>${message}</h1>

</script>

---

1. jquery-tmpl-master.zip 다운로드

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

 

1-1. jquery.tmpl.min.js 클릭

1-2. 파일 다운로드

 

1-3. 다운받은 파일을 template을 사용할 프로젝트 안에 넣는다(File : js)

 

---

사용방법

 

 

템플릿으로 사용할 HTML 태그

<script type="text/javascript" id="itemTemolate">
	<tr>
		<td class="no">${no}</td>
		<td class="left subject">${subject}</td>
		<td class="hit">${hit}</td>
		<td class="date">${date}</td>
	</tr>
</script>

 

반복해서 사용할 템플릿을 선언하고

 

이런식으로 불러낸다.

let tmpl = $('#itemTemplate').tmpl(data.item);