我可以用thymeleaf设置data- *属性吗?
据我从thymeleaf文件中了解到,我试过:
<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->
<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
答案 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.getName()}">
答案 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='{"foo":'+${bar}+'}'"
您可以使用(与literal substitution结合使用):
th:data-foobar='|{"foo":${bar}}|'
更新:如果您不喜欢th
名称空间,也可以像data-th-data-foobar=""
一样使用HTML5 friendly attribute and element names。
如果有人感兴趣,可以在这里找到相关的模板引擎测试:Tests for Default Attribute Processor