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

我正在使用一个Javascript库来生成一个旋转木马，它有一个自定义属性

dataflickity

。当我使用Springboot的最新快照版本（

2.0.0.build-SNAPSHOT

）时，组件工作正常，代码没有任何更改，但当我降级到最新版本（

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中正确格式化上述内容

如果您不需要对属性执行任何“动态”操作，那么您应该能够像在第一个代码片段中一样将其直接包含在文档中，即使它是非标准的或带有前缀的属性。如果这对你不起作用，那么不管你看到什么问题，大概都是因为别的原因

您的第二个代码块有一个输入错误：

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