在thymeleaf中使用data- *属性

时间:2014-06-25 14:45:23

标签: html thymeleaf

我可以用thymeleaf设置data- *属性吗?

据我从thymeleaf文件中了解到,我试过:

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

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

3 个答案:

答案 0 :(得分:193)

是的,th:attr来救援Thymeleaf documentation - Setting attribute values

对于您的方案,这应该做的工作:

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

XML规则不允许您在标记中设置两次属性,因此您在同一元素中不能有多个th:attr

注意:如果您想要多一个属性,请用逗号分隔不同的属性:

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

答案 1 :(得分:10)

或者你可以使用这个Thymeleaf方言https://github.com/mxab/thymeleaf-extras-data-attribute,你就能做到

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

答案 2 :(得分:4)

在Thymeleaf 3.0中,Default Attribute Processor可用于任何类型的自定义属性,例如th:data-el_id=""变成data-el_id=""th:ng-app=""变成ng-app="",依此类推。不再需要受欢迎的data属性方言。

我更喜欢这种解决方案,如果我想使用json 作为值,而不是:

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

您可以使用(与literal substitution结合使用):

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

更新:如果您不喜欢th名称空间,也可以像data-th-data-foobar=""一样使用HTML5 friendly attribute and element names

如果有人感兴趣,可以在这里找到相关的模板引擎测试:Tests for Default Attribute Processor