ThymeleafでJavaScriptを埋め込む (インライン処理)

Thymeleafを書籍で学びたい方やThymeleafと一緒にSpringも習得したい方におすすめな書籍です。
Springについての書籍ですが、Thymeleafの基本構文や他システムとの連携など30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるのはいかがでしょうか？

Spring徹底入門 Spring FrameworkによるJavaアプリケーション開発

翔泳社

¥1,980 （2022/07/18 00:00時点 | Amazon調べ）

Amazonで見る

Kindleで見る

ポチップ

実行環境

実行環境がない方は、こちらの記事を参考にしてください。

ThymeleafでJavaScriptを埋め込む (インライン処理)

th:inline="javascript" を指定することでインライン処理が有効になります。式は /*[[${式}]]*/ で使用します。

以下のコードサンプルでは、 btnInline が押下された際に textInline の文字列を text で書き換えます。
例えば、Controllerクラスで text に “Hello from JavaScript inline” を指定した場合、”Hello World” を無視して “Hello from JavaScript inline” で書き換えます。th:inline="javascript" を指定しない場合、”Hello World” で書き換えます。

<script th:inline="javascript">
  const btnInline = document.querySelector("#button-inline");

  btnInline.addEventListener("click", () => {
    const textInline = document.querySelector("#text-inline");
    textInline.textContent = /*[[${text}]]*/ "Hello World";
  });
</script>

外部のJavaScriptファイルを読み込む

Thymeleafでは外部のJavaScriptファイルを読み込むことができます。
こちらの記事で紹介しています。

お疲れさまでした

ThymeleafでJavaScriptを埋め込む方法 (インライン処理) を紹介しました。
少しでも参考になれば幸いです。