html 对Thymeleaf使用data-* 属性

qyzbxkaa  于 2022-12-09  发布在  其他
关注(0)|答案(3)|浏览(234)

我可以用Thymeleaf设置data-* 属性吗?
正如我从Thymeleaf文档中了解到的那样,我尝试了:

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

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

a14dhokn1#

是的,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()}">
yhxst69z

yhxst69z2#

Thymeleaf 3.0提供了默认属性处理器,可以用于任何类型的自定义属性,例如,th:data-el_id=""变成data-el_id=""th:ng-app=""变成ng-app=""等等。不再需要受欢迎的数据属性方言。
这个解决方案我更喜欢,如果我想用json作为值,而不是:

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

您可以使用(与文字替换结合使用):

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

**更新:**如果您不喜欢th名称空间,您也可以使用HTML5友好的属性和元素名称,如data-th-data-foobar=""

uelo1irk

uelo1irk3#

或者你可以用Thymeleaf方言https://github.com/mxab/thymeleaf-extras-data-attribute

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

相关问题