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

我可以用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

前往救援

对于您的场景，这应该可以完成以下工作：

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

---

或者你可以用这个百里香方言，你就能做到

<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

名称空间，也可以使用like

data th data foobar=“”

---

如果有人感兴趣，可以在这里找到相关的模板引擎测试：

请注意，同一个元素中不能有多个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；-）这是一个bug。此问题仅与3.0版本之前的版本相关。对于较新的

th:data-el_id

将起作用。

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

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