在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數據屬性

回答

相關問題