在 Thymeleaf/Springboot 中使用自定义 html 数据属性

Question

我正在使用 Javascript 库制作轮播，它有一个自定义属性 data-flickity。当我使用 Springboot 的最新 SNAPSHOT 版本 (2.0.0.BUILD-SNAPSHOT) 时，该组件在没有对代码进行任何更改的情况下工作得很好，但是当我降级到最新的 RELEASE (1.5.2.RELEASE) 时，该组件完全崩溃了。我需要在 1.5.2 上运行这个。我觉得它与自定义数据属性有关：

<div class="gallery" data-flickity='{ "cellAlign": "left", "contain": true }'>

所以我尝试了这个：

<div class="gallery" th:atrr="data-flickity='{ "cellAlign": "left", "contain": true }'">

即使这不是最终的问题，我如何在 Thymeleaf 中正确格式化上述内容？

Answer 1

如果您不需要为某个属性做任何事情 "dynamic"，您应该能够像在您的第一个代码片段中一样将其直接包含在您的文档中，即使它不是-standard 或 data- 前缀属性。如果这对您不起作用，可能是其他原因导致了您遇到的任何问题。
你的第二个代码块有错别字：td:attr 是如何在 Thymeleaf 中创建任何类型的通用属性，但你有 td:atrr。我假设这只是您发帖时的转录错误，但拼写错误是计算机非常挑剔的事情之一。
在你的第二个代码块中（这是你想要的，特别是如果你需要动态指定自定义属性的内容），有三个级别的引用：在外部 HTML，在 Thymeleaf th:attr 语法中，然后在你放在那里的值内引用。大多数语言（包括 HTML/XML、Thymeleaf 和 JSON）都支持交替使用双引号或单引号来帮助实现这些级别的嵌套，但是一旦拥有三级嵌套，它就会变得有点棘手。您需要避免内部双引号被外部级别解析，并且由于您在外部级别使用 HTML/XML 您想要使用其转义引号的方法，留下如下内容：
```
<div class="gallery" th:attr="data-flickity='{ &quot;cellAlign&quot;: &quot;left&quot;, &quot;contain&quot;: true }'">
```
或者，您可以引用第二层而不是第三层，并在外层使用单引号：
```
<div class="gallery" th:attr='data-flickity=&apos;{ "cellAlign": "left", "contain": true }&apos;'>
```

在 Thymeleaf/Springboot 中使用自定义 html 数据属性

Using custom html data attribute in Thymeleaf/Springboot

html

javascript

spring-mvc

thymeleaf

spring-boot-actuator