将 data-* 属性与 thymeleaf 一起使用答案

【问题标题】：using data-* attribute with thymeleaf将 data-* 属性与 thymeleaf 一起使用
【发布时间】：2014-08-16 04:52:00
【问题描述】：

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

正如我从百里香文档中了解到的那样，我尝试过：

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

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

【问题讨论】：

【解决方案1】：

对于您的方案，这应该可以完成工作：

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

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

注意：如果你想要多个属性，用逗号分隔不同的属性：

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

【讨论】：

只是给未来读者的一个提示，在同一个元素中不能有超过一个 th:attr 所以只需使用一个并用逗号分隔不同的属性：th:attr="data-id=${element.getId()},data-name=${element.getName()}"
如果你需要在字符串中包含一个变量，你需要这样做：th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"
@AntonioOtero 的评论应该是答案的一部分。
我希望属性处理不限于某些属性，而是一般处理。有没有人听说它将成为功能？（好吧，怪我，我还没有检查版本 3 ;-)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在 Thymeleaf 3.0 中，Default Attribute Processor 可用于任何类型的自定义属性，例如th:data-el_id="" 变成 data-el_id=""，th:ng-app="" 变成 ng-app="" 等等。再也不需要心爱的数据属性方言了。

我更喜欢这个解决方案，如果我想使用 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

【讨论】：