web-dev-qa-db-ja.com

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 -->
htmlthymeleaf
111
Alexandru Severin

はい、th:attrが助けになります Thymeleafのドキュメント-属性値の設定 。

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

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

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

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

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

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

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

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

私が好むこの解決策は、値としてjsonを使用する場合：

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

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

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

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

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

5
RiZKiT