ThymeleafでJavaScriptを埋め込む（インライン処理）

本記事の内容

Thymeleaf(HTML)の中で、Modelに格納したDtoのプロパティなどの値を元にJSの処理を呼び出したい場面があった。その場合の記載方法に関して以下に記す。

記載方法

HTML内のscriptタグ内にて以下のように記載をすると実現可能。
（参考資料によるとインライン処理というらしい。。）

hoge.html

<script th:inline="javascript">
    function showText(){
      document.getElementById("memotext").style.display = "block";
      document.getElementById("memotextarea").style.display = "none";
    }

    function showTextarea(){
      document.getElementById("memotext").style.display = "none";
      document.getElementById("memotextarea").style.display = "block";
    }

    [#th:block th:if="${#strings.isEmpty(mypageViewDto.displayEntryMemo) || errorMessage != null}"]
      showTextarea();
    [/th:block]
    [#th:block th:unless="${#strings.isEmpty(mypageViewDto.displayEntryMemo) || errorMessage != null}"]
      showText();
    [/th:block]
</script>

参考資料