Thymeleaf3で属性値へ動的に値を埋め込み＆テキストを追加したい場合

ものの見事にはまったのでメモ残し。

特に気にしなくても良い場合

属性値そのままを出力する場合は特に気にせず、次のように書ける。

<a href="#" th:id="${page}">

id属性には Variableに格納した page の値を出力する。

属性値をテンプレート内で編集して出力する場合

先ほどの例では、属性値を全部入れておかないとならないので、Javaのロジック側にView用のコードを必要とする。しかしわざわざ専用のDiarectを作ってまで対応するかと言えばそうでなく、簡単なルールなのでHTMLテンプレート内のみで完結させたい。

その場合はこうする。

<a href="#" th:id="'pageNumber_' + ${page}">

こうすると、id属性は pageNumber_3 など、文字列連結した結果を出力する。これはOGNL式がこのように解決するため。( Struts2のJSPやFreeMarkerと同じ )

JavaScriptと関連する属性の場合

困るのがこのケース。

<a href="#" onclick="pagination(6);" />

などを動的に行いたい場合、なんと 素直にかこうとするとテンプレート例外が出て詰まる

正解はこうなる。

<a href="#" th:attr="onclick='pagination(' + ${page} + ');'" >

シングルクォーテーションで区切った文字が、Variableからの参照なのかonclickで起動するスクリプトの区切り文字なのかで少し戸惑うが、${ } の前後にある連結記号が先に解釈される。