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

【问题标题】：Using custom html data attribute in Thymeleaf/Springboot在 Thymeleaf/Springboot 中使用自定义 html 数据属性
【发布时间】：2017-09-09 08:52:40
【问题描述】：

我正在使用 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 中正确格式化上述内容？

【问题讨论】：

标签： javascript html spring-mvc thymeleaf spring-boot-actuator

【解决方案1】：

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;'>
```

【讨论】：