【8/27まで】Udemyの人気コースが今なら1,200円から!!

【Spring Boot】thymeleaf(メモ)

【Spring Boot】thymeleaf

Thymeleafの宣言

HTMLファイルの中に以下のHTML要素があるとき、”th~”から始まる属性があればそれはThymeleafを指しますよ。と宣言するものです。

HTML

<html xmlns:th="http://www.thymeleaf.org">

th:text属性

Thymeleafはth:text属性を見つけるとその右辺にある変数式"${sample}"に書かれている変数の値を取得し、テキストに変換します。

HTML

<p th:text="${sample}"></p>

th:object属性

form要素にバインドするJavaのオブジェクトを設定します。
th:objectのスコープ内では、オブジェクト名を省略してフィールド名のみ記述できるようになります。

<form th:action="@{/}" th:object="${otoiawase}" method="post" novalidate>

th:objectを使用しない場合は、${オブジェクト名.フィールド名}の形式で記述する必要があります。
${person.age}

th:field属性

input要素のid属性、name属性、value属性をHTMLに出力することができます。
th:field="*{name}"と指定すると、id属性とname属性の値はnameになります。

<input type="text" th:field="*{name}"><br>

変数式"${}"

変数を埋め込むことができます。
記述例は以下のとおりです。

HTML

<form th:action="@{/}" th:object="${otoiawase}" method="post" novalidate>

th:error属性

エラーがあった場合にエラーメッセージを表示できます。

HTML

<div class="invalid-feedback" th:errors="*{name}"></div>

リンクURL式"@{}"

記述例は以下のとおりです。リンクURL式を使うと、staticフォルダを起点としたパスとして解釈されます。
従って下記は、/static/webjars/bootstrap/css/bootstrap.min.cssを意味します。

HTML

<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

以下のように記述すれば、/static/css/style.cssを意味します。

HTML

<link th:href="@{/css/style.css}" rel="stylesheet">

メッセージ式"#{}"

messeage_ja_propertiesのテキストを埋め込むことができます。
記述例は以下のとおりです。

HTML

<h4 class="border-bottomy-3" th:text="#{contents}"></h4>

選択変数式"*{}"

th:objectが指定された要素ないでオブジェクト名を省略してフィールド名のみ記載できるようになります。

HTML

<div class="invalid-feedback" th:errors="*{name}"></div>

th:errorclass="xxx"

エラーがあった場合にclass属性にstyleを付与できます。
記述例は以下のとおりです。

HTML

<input type="text" class="form-control" th:errorclass="is-invalid" placeholder="taro" th:field="*{name}">

コメントを残す

メールアドレスが公開されることはありません。