Thymeleaf : javascript 함수 호출 방법

Thymeleaf : javascript 함수 호출 방법

Spring boot로 웹 어플리케이션을 개발하고 있다. 

View영역이 Thymeleaf로 개발되고 있기 때문에 Thymeleaf를 공부하지 않을 수 없게 되었는데 오늘은 이미 오래전 감각을 잃어버린 웹 개발 방식을 익히느라 정신이 없다. 왜 앱 개발자가 웹을 개발하냐고? 그냥 그렇게 됐다. 

우선 오늘은 회원 리스트에서 회원명을 클릭할 경우 새창이 뜨면서 파라미터로 회원의 고유키를 넘겨야 하는 상황이 발생. 기존 HTML방식에서라면 별 문제가 안될 것 같은데 모델과 뷰를 적절히 섞어 사용해야 하는 만큼 약간의 수고가 필요하게 되었다. 

<script type="text/javascript" th:inline="javascript">

/*<![CDATA[*/

var userDetail = function(seq) {

alert(seq);

window.open("/user/defatil/"+ seq); 

}

/*]]>*/

</script>

위와 같은 스크립트를 만들고 사용자 seq를 받는 함수를 추가했다. 해당 함수는 새 창을  띄우면서 파라미터로 사용자 seq를 받는 구조로 되어 있다. 

실제 리스트를 만드는 소스는 다음과 같다. 

<tbody th:unless="${#lists.isEmpty(users)}">

<tr class="" th:each="user : ${users}">

<td>

<span style="cursor:hand;" th:onclick="'javascript:userDetail('+ ${user.seq} + ');'" th:text="${user.seq}">NO</a></span>

</td>

처음에 당혹스러웠던건 <a href="javascript~ 방식이 제대로 안돼서 당혹스러웠고, th:onclick=을 사용해야 한다는 사실에 또 한번 당혹? 스러웠다. ㅋㅋㅋ 뭐든 새로 배워야하는 부분은 참 어렵다. 

thymeleaf_Tutorial_번역본_v1.1_20131213.pdf