thymeleafでdata- *属性を使用する

thymeleafでdata- *属性を設定できますか？

私はthymeleafのドキュメントから理解したように、私は試しました：

<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->

はい、Thymeleafのドキュメントをth:attr救うために-属性値の設定。

あなたのシナリオでは、これは仕事をするはずです：

<div th:attr="data-el_id=${element.getId()}">

XMLルールでは、タグで属性を2回設定することはできませんth:attr。そのため、同じ要素に複数の属性を含めることはできません。

注：複数の属性が必要な場合は、異なる属性をコンマで区切ります。

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}"> 

または、このThymeleaf方言https://github.com/mxab/thymeleaf-extras-data-attributeを使用すると、次のことができます

<div data:el_id="${element.getId()}">

Thymeleaf 3.0には、任意の種類のカスタム属性（例えば、になる、になるなど）に使用できるデフォルト属性プロセッサがあります。最愛のデータ属性の方言はもう必要ありません。th:data-el_id=""data-el_id=""th:ng-app=""ng-app=""

このソリューションでは、値としてjsonを使用する場合は、次の代わりに使用します。

th:attr="data-foobar='{"foo&quot:'+${bar}+'}'"

（リテラル置換と組み合わせて）使用できます：

th:data-foobar='|{"foo":${bar}}|'

更新：th名前空間が気に入らない場合は、HTML5フレンドリーな属性とのような要素名を使用することもできますdata-th-data-foobar=""。

誰かが興味を持っている場合は、関連するテンプレートエンジンテストをここで見つけることができます：デフォルトの属性プロセッサのテスト