Thymeleaf/Springbootでのカスタムhtmlデータ属性の使用

Question

私はカルーセルを生成するためにJavascriptライブラリを使用しています。カスタム属性はdata-flickityです。私がSpringboot（2.0.0.BUILD-SNAPSHOT）の最新の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 }'"> 

を、どのように私は適切で上記をフォーマットしますタイメレフ？

Answer 1

1. あなたは属性の「ダイナミック」何もする必要がない場合、あなたはそれが非標準またはdata-だ場合でも、あなたの最初のコードスニペットのように、ドキュメント内で直接それを含めることができるはずです接頭辞付き属性。それはあなたのために働いていない場合は、おそらく他の何かがあなたが見ている問題を引き起こして起こっている。

2. 2番目のコードブロックにはタイプミスがあります。td:attrは、Thymeleafの任意のタイプの汎用属性を作成する方法ですが、代わりにtd:atrrです。私はそれがあなたの投稿の転記エラーであると仮定していますが、誤植はコンピュータがかなり気になるものです。

3. 2つ目のコードブロック（特にカスタム属性の内容を動的に指定する必要がある場合）には、3つのクォーテーションレベルがあります。外側のHTMLでは、Thymeleaf th:attr構文内、そしてあなたがそこに置いている価値の中で引用します。ほとんどの言語（HTML/XML、Thymeleaf、およびJSONを含む）は、これらのレベルの入れ子を助けるために二重引用符または一重引用符を交換可能に使用することをサポートしますが、3つのレベルを持つと少し難解です。外側のレベルで内部二重引用符をエスケープする必要があります。外側のレベルで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;'>