在百里香中使用data- *属性

125

我可以设置百里香的data- *属性吗？

从百里香叶文档中了解到，我尝试过：

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

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

html thymeleaf

— 亚历山德鲁·塞维林
source

7

这是一个错误，已修复Thymeleaf 3.0。此问题仅与3.0之前的版本有关。对于较新的th:data-el_id将起作用。

— GabiM

219

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

— 阿尔德里安
source

54

只是为将来的读者提供的注释，您不能在同一元素中包含多个th：attr，因此只能使用一个并用逗号分隔不同的属性：th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero 2014年

5

如果需要在字符串中包含变量，则需要执行以下操作：th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

@AntonioOtero的评论应该是答案的一部分。

— Don Cheadle

我希望属性处理将不限于某些属性，而应进行一般处理。有人听说过它会是功能吗？（怪我，我还没有检查版本3 ；-）

— Dirk Schumacher

11

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

— 阿德里安·伯
source

7

在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=""。

如果有人感兴趣，可以在这里找到相关的模板引擎测试：默认属性处理器的测试

— RiZKiT
source