thymeleaf와 함께 data- * 속성 사용

thymeleaf와 함께 data- * 속성 사용

---

thymeleaf로 data- * 속성을 설정할 수 있습니까?

thymeleaf 문서를 이해 했으므로 시도했습니다.

<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->

---

예, th:attr구조 Thymeleaf 문서-속성 값 설정 .

시나리오의 경우 다음을 수행해야합니다.

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

XML 규칙을 사용하면 태그에서 속성을 두 번 설정할 수 없으므로 th:attr동일한 요소에 둘 이상을 가질 수 없습니다 .

참고 : 하나 이상의 속성을 원하면 다른 속성을 쉼표로 구분하십시오.

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

---

또는이 Thymeleaf 방언 https://github.com/mxab/thymeleaf-extras-data-attribute 를 사용할 수 있습니다.

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

---

Thymeleaf 3.0 거기입니다 기본 속성 프로세서 사용자 지정 특성의 모든 종류에 사용할 수 있습니다, 예를 들어이 th:data-el_id=""되고 data-el_id="", th:ng-app=""이된다 ng-app=""등등. 더 이상 사랑하는 데이터 속성 방언이 필요하지 않습니다.

이 솔루션 은 json 을 값 대신 사용하려는 경우 선호합니다 .

th:attr="data-foobar='{"foo&quot:'+${bar}+'}'"

리터럴 대체 와 함께 사용할 수 있습니다 .

th:data-foobar='|{"foo":${bar}}|'

업데이트 :th 네임 스페이스 가 마음에 들지 않으면 HTML5 친화적 인 속성과 같은 요소 이름을 사용할 수도 있습니다 data-th-data-foobar="".

관심있는 사람이 있으면 관련 템플리트 엔진 테스트를 찾을 수 있습니다. 기본 속성 프로세서 테스트

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