Thymeleaf 3.0でのHTML5 data属性の書き方

Thymeleaf 2.1まで、HTML5のdata-*属性を使うにはth:attrを使うか、thymeleaf-extras-data-attributeなどの拡張を使う必要がありました。

しかし、Thymeleaf 3.0からは、これらの拡張は必要ありません！単にth:data-fooまたはdata-th-data-foo (HTML5フレンドリーな属性や要素名のサポート機能)と書くだけで良くなりました。

こう書くと

<p th:data-foo="${foo}" data-th-data-baa="${baa}"></p>

こうなります。

<p data-foo="fooval" data-baa="baaval"></p>

便利ですね！

ネタとしては以上です。以下ソースコードを見てみましょう。

Thymeleaf 3.0で追加された StandardDefaultAttributesTagProcessorがそれです。コンストラクタを見ると、優先度最低で、プレフィクスにマッチする全ての属性を引っかけるようになっているのが分かります。（PRECEDENCEはInteger.MAX_VALUEです）

StandardDefaultAttributesTagProcessor.java

public StandardDefaultAttributesTagProcessor(final TemplateMode templateMode, final String dialectPrefix) {
    super(templateMode, PRECEDENCE);
    this.dialectPrefix = dialectPrefix;
    this.matchingAttributeName = MatchingAttributeName.forAllAttributesWithPrefix(getTemplateMode(), dialectPrefix);
}

Thymeleafは登録されている複数のProcessorを上から順に処理していきます。th:altなどProcessorが定義されているものはそれらで処理され、こぼれ落ちたものがこのStandardDefaultAttributesTagProcessorで処理されるわけですね。

また、マッチ対象がMatchingAttributeName.forAllAttributesWithPrefix(getTemplateMode(), dialectPrefix)となっています。これはつまり、最初に書いたようなdata-*属性はもちろん、th:hogeでもdata-th-ng-clickでも、Thymeleafのプレフィクスから始まってさえいれば、好きな属性値が使い放題なわけですね！