[Thymeleaf] 커스텀 데이터 속성 사용법

동적으로 그려진 html 각 요소들을, 추후 사용자의 동작에 맞춰 컨트롤하고 싶을때가 있습니다.

이런 경우 각 태그에 attribute를 부여해놓으면 쉽게 컨트롤 할 수 있습니다.

 

 

<div th:attr="data-el_id=${element.getId()}">

el_id에 element.getId() 값을 세팅하는 코드입니다.

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}">

태그 안에서 여러개 속성을 동시에 부여할 수도 있습니다.

 

 

$("li").data("el_id");

jQuery를 활용하여 설정한 attribute에 쉽게 접근할 수 있습니다.

 

 

 

참고 1 : https://stackoverflow.com/questions/24411826/using-data-attribute-with-thymeleaf

using data-* attribute with thymeleaf

참고 2 : https://stackoverflow.com/questions/4145636/jquery-custom-attributes

Jquery custom attributes