Spring[스프링]_제이쿼리템플릿(jQuery Template)을 이용한 HTML구문 삽입

jQuery를 통해 내가 원하는 영역을 선택하고 선택한 영역안에 직접 작성한 HTML 구문 삽입하기

<script type="application/javascript">
	$('#selectDivId').html($('#choseForm').tmpl(Object));
</script>

자바스크립트 영역에서 제이쿼리를 이용하여 selectDivId의 영역을 지정하고 .html()을 통해 내가 직접 작성한 HTML 구문을 삽입할 수 있다.

 

.html()내부에 $('#choseForm') 이라는 id를 가진 html 구문을 삽입할 수 있으며 해당 영역에 .tmpl 이라는 템플릿을 통해 해당 영역에 객체를 전달하여 객체 내부에 들어있는 변수 값들을 {{= }}을 이용해 표현할 수 있다. 

<script type="text/x-jquery-tmpl" id="choseForm">
        <div data-변수명="{{= 변수}}">
                <div>
                    <a href="#" title="{{= 변수명}}">{{= 변수}}</a>
                        {{if 변수 > 5}}
                            <div>
                                <span>{{= 변수}}</span>
                            </div>
                        {{/if}}
                </div>
        </div>
</script>

갑자기 의문이 드는 점이 생겨났습니다. 자주 보지 못했던 HTML 태그안에 data-변수명이 있었습니다.

 

jQuery data-변수명 속성을 추가하는 data()함수

HTML5는 DOM 객체에 데이터를 저장해두기 위해 속성을 아무렇게나 정의해서 사용하지 않도록 data-변수명과 같이 data-변수명으로 시작하는 속성을 사용하도록 권고한다고 합니다.

 

태그에 사용자 변수명을 저장하여  year속성을 넣어두고 싶은 경우 <span data-year="2023"> 로 사용하도록 하고 있습니다.

<span year="2023">                                               
<span data-year="2023"> <!-- HTML5 권장 -->

$('span').data('year', 2023); // save (.attr())
attr('data-year', '2023') // attr() 

<span data-date='{"year":"2023", "month":"02"}' />  // save JSON Object

// 지정된 데이터의 경우 변수명만 가져와 값 출력가능
$('span').data('year'); // output = 2023

위와 같이 제이쿼리를 이용하여 변수명에 값을 전달해주고 출력값을 얻어낼 수 있습니다.

또한, JSON 객체로 저장된 경우 JSON형태의 값으로 출력가능하기 떄문에 여러 방법으로 사용 및 변형이 가능합니다.

 

다음으로 이중 중괄호입니다. 이전에는 JSTL 또는 EL을 통한 ${ ] 방식으로 값을 출력했습니다.

그러나 제이쿼리를 이용한다면 {{= }} {{ if }} 와 같이 다른 방법으로 사용됩니다.

 

<div>
	<a href="#" title="{{= 변수명}}">{{= 변수}}</a>
	{{if 변수 > 5}}
		<div>
			<span>{{= 변수}}</span>
		</div>
	{{/if}}
</div>

위처럼 사용된  변수명을 이용하여 값을 표현하고 싶은 경우 {{= }} 를 이용하여 값을 표현해 줄수 있습니다.

또한, {{if }} 를 활용하여 조건문을 이용한 표현도 가능하기 때문에 제이쿼리의 이용함에 따라 얻을 수 있는 효능이 있습니다.