Thymeleafの部品化

th:fragment によって部品を作るのは比較的簡単にできるが、
類似の部品が出てきた時に、その中の一部を変更したい場合にどうするか？

例えば以下のようなイメージ。
barタグとbazタグだけが差分であり、その他は同じ構成になっている。

<foo id="foo1">
  <div></div>
  <bar></bar>
</foo>

<foo id="foo2">
  <div></div>
  <baz></baz>
</foo>

それぞれのfooタグを部品として定義するのも良いが、それでは重複コードが多すぎる。

これを解決するには、layout dialectを使えば良さそう。
部品の中に別のHTMLフラグメントを入れることができる。

例えばBootstrapのHorizontal Formの入力項目1つを表現した部品。

_fragments/form.html

<div layout:fragment="form-base (field, label)">
  <label class="control-label" th:for="${field}" th:text="${label}"></label>
  <div layout:fragment="form-content"></div>
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" th:if="${#fields.hasErrors('__${field}__')}"></span>
  <span th:id="|status-${field}|" class="sr-only">(error)</span>
  <div class="help-block" th:if="${#fields.hasErrors('__${field}__')}" th:errors="*{__${field}__}">Error</div>
</div>

これをベースにして個別の部品を作っていく。
layout:includeで上の部品を取り込み、その内側のlayout:fragmentで別のフラグメントを組み込む。

<div th:fragment="input-text (field, label, autofocus)" class="form-group has-feedback" th:classappend="${#fields.hasErrors('__${field}__')}? 'has-error'">
  <div layout:include="_fragments/form :: form-base(field=${field}, label=${label})" th:remove="tag">
    <input layout:fragment="form-content" type="text" class="form-control" th:field="*{__${field}__}" th:attr="aria-describedby=|status-${field}|" th:autofocus="${autofocus}? 'autofocus'"/>
  </div>
</div>

こうすれば類似の部品をある程度共通化することができる。
注意点は、layout:fragmentの中に書くのは名前(上記ではform-content)であってパス(_fragments/form :: form-contentなど)ではない点。