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

我正在使用Javascript库生成旋转木马，并且它具有自定义属性data-flickity。当我使用Springboot的最新SNAPSHOT构建版本（2.0.0.BUILD-SNAPSHOT）时，组件工作正常，没有对代码进行任何更改，但是当我降级到最新的RELEASE（1.5.2.RELEASE）时，组件完全中断。我需要运行这个1.5.2。我有一种感觉它与自定义的数据属性做：在Thymeleaf/Springboot中使用自定义html数据属性

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

所以，我想这一点：

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

即使最终不是问题，我将如何正确格式在上面Thymeleaf？

来源

2017-04-13 santafebound

如果你不需要某个属性做任何事情，“动态”，你应该能够直接在文档中包含它作为你的第一个代码段，即使它是非标准或data-前缀属性。如果这不适合你，大概还有其他事情会导致你看到的任何问题。
您的第二个代码块有一个错字：td:attr是如何在Thymeleaf中创建任何类型的通用属性，但是您有td:atrr而不是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;'> 
```

来源

2017-04-14 20:20:42

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

回答

相关问题