😺

Thymeleafメモ

2021/08/11に公開

HTML5 的に好きな要素に Thymeleaf で値を埋めたい

th:attr を使えば良い。

下のサンプルは適当な名前にしていますが、正式にやるときは data-attr のように data-を付けて下さい。

<a href="#" th:attr="myattr=myvar">test</a>

myvar = "abc"のときの出力
=> <a href="#" myattr="abc">test</a>

<a href="#" th:attr="myattr1=myvarA,myattr2=myvarB">test</a>

myvarA="abc" / myvarB="XYZ"のとき
<a href="#" myattr1="abc" myattr2="XYZ">test</a>

Javascript にオブジェクトを埋め込みたい

以下の通りにすれば OK

  • script タグに th:inline="javascript" を付ける
// 例
<script th:inline="javascript">
/*<![CDATA[>*/
   var API_URL = /*[[ @{/api/test}]]*/ "dummy";   // URL埋め込み
   	var obj = /*[[${obj}]]*/ {}; // {"name":"test", "job" : "hagure-metal"}
/*]]>*/
</script>

権限がある人にだけ何かを表示する (SpringSecurity 連携)

取説は以下

https://github.com/thymeleaf/thymeleaf-extras-springsecurity

hasRole を使う

<code class="language-html"><li sec:authorize="hasRole('ROLE_ADMIN')">
    <a href="/hoge">管理者にしか見えないリンク</a>
</li>

<!-- (少なくとも)SpringSecurity4以降なら ROLE_ は省略可能 -->
<li sec:authorize="hasRole('ADMIN')">
    <a href="/hoge">管理者にしか見えないリンク</a>
</li>

authorize-url を使う

<li sec:authorize-url="/admin/">
    <a href="/hoge">管理者にしか見えないリンク</a>
</li>

Discussion