ゼロイチ

WordpressやWEB技術ネタ

Thymeleaf

変数式

投稿日:2018年5月18日 更新日:

変数式の使い方

基本 th:text
変数の呼び出し
${msg} がセットされている場合は、”please wait….”は表示されない。変数式:${} :OGNL(Object Graph Navigation Language)
 <p th:text=”${msg}”>please wait….</p>
基本 th:text
インスタンスのnew + メソッドの呼び出し
<p th:text=”${new java.util.Date().toString()}”></p>
ユーティリティオブジェクト #strings
クラスの定数。
#strings.○○ のようにフィールドやメソッドを呼び出して利用する
new #strings にようにインスタンスを作るような利用はできない。
<p th:text=”${#strings.toUpperCase(‘Welcome to Spring.’)}”></p>
#number <p th:text=”${#numbers.formatInteger(1234,7)}”></p>
#dates <p th:text=”${#dates.format(new java.util.Date(),’dd/MMM/yyyy HH:mm’)}”></p>
#bools
#objects
#arryas
#lists
#sets
#maps
クエリテキストのパラメータ処理(view) クエリテキストにパラメータを付けて送信されてきたときのviewでの利用

http://localhost:8080/home/?id=ok&id=ng&name=tuyano

<p th:text=”‘from parameter… id=’ + ${param.id[0]
+ ‘, id=’ + param.id[1]
+ ‘ ,name=’ + param.name[0]}”></p>
メッセージ式 プロパティファイルの値をとる <p th:text=”#{content.message}”></p>
リンク式 クエリテキストのパラメータをリンクに組み込む

http://localhost:8080/home/?id=123

 <p><a th:href=”@{‘/home/’ + ${param.id[0]}}”>link</a></p>
オブジェクト利用 オブジェクトのプロパティを変数式で出力する

左記は、 ${object.id} と同義

 <table th:object=”${object}”>  <!– tableタグでオブジェクトを設定 –>
<tr>
<th>ID</th>
<td th:text=”*{id}”></td>   <!– tableタブ内では *{プロパティ} で呼べる –>
</tr>
<tr>
<th>NAME</th>
<td th:text=”*{name}”></td>
</tr>
</table>
リテラル置換 変数式とテキストを文字結合する際の ”+” を省略
| で囲む。
 <div th:object=”${object}”>
<p th:text=”|my name is *{name}. mail address is *{value}.|”>message.</p>
<p th:text=”‘my name is ‘ + *{name} + ‘. mail address is ‘ + *{value} + ‘.'”>message.</p>
</div>
HTMLコード出力 th:utext :アンエスケープテキスト属性

mav.addObject(“msg”, “message 1<hr/>message 2<br/>message 3”);

<p th:utext=”${msg}”>message.</p>
三項演算子 変数式 ? 値1 : 値2

下記のように参考式に他の文字を結合しようとするとなぜか正しくうごかない
<p th:text=”${id1} + ‘ is ‘ + ${check} ? ${trueVal} : ${falseVal}”></p>

<p th:text=”${check} ? ${trueVal} : ${falseVal}”></p>
条件分岐 th:if th:if= trueのときにのみ表示される処理
trueの条件(true、0以外の数値、0、off、noなど以外のテキスト)
th:unless= falseのときにのみ表示される処理
falseの条件(false、0の数値、0、off、noなどのテキスト
<p th:if=”${check}” th:text=”${id} + ‘ is ‘ + ${trueVal}”></p>
<p th:unless=”${check}” th:text=”${id} + ‘ is ‘ + ${falseVal}”></p>
条件分岐 th:switch <div th:switch=”${check}”>
<p th:case=”0″ th:text=”|${month} – Winter|”></p>
<p th:case=”1″ th:text=”|${month} – Spring|”></p>
<p th:case=”2″ th:text=”|${month} – Summer|”></p>
<p th:case=”3″ th:text=”|${month} – Autumn|”></p>
<p th:case=”4″ th:text=”|${month} – Winter|”></p>
<p th:case=”*”>…?</p>
</div>
繰り返し th:each
コレクションや配列を回す
・エンティティでの利用
<ul th:each=”obj : ${list}”>
<li th:text=”${obj}”></li>
</ul>
—————–
・配列のリストの利用
<table>
<tr>
<th>NAME</th>
<th>MAIL</th>
<th>TEL</th>
</tr>
<tr th:each=”obj:${data}”>
<td th:text=”${obj[0]}”></td>
<td th:text=”${obj[1]}”></td>
<td th:text=”${obj[2]}”></td>
</tr>
</table>
プリプロセッシング __${変数式}__ アンダースコア2つずつで挟む
変数式に数式等をテキストでバインドしておき、上記記述で式が評価されるmav.addObject(“check”, “num >= data.size() ? 0 : num”);
<table th:object=”${data.get(__${check}__)}”>
<tr><th>ID</th><td th:text=”*{id}”></td></tr>
<tr><th>NAME</th><td th:text=”*{name}”></td></tr>
<tr><th>MAIL</th><td th:text=”*{value}”></td></tr>
</table>
変数式 インライン 親タグで th:inline=”text” を記述しておき、
インラインで記述したい変数式は  [[${変数式}]] で記載。
記述場所はHTMLでのテキスト記述と同じで、タグで挟む
 <table th:inline=”text”>
<tr>
<th>ID</th>
<th>NAME</th>
<th>MAIL</th>
</tr>
<tr th:each=”obj : ${data}”>
<td th:text=”${obj.id}”></td>
<td>[[${obj.name}]]</td>
<td>[[${obj.value}]]</td>
</tr>
</table>
変数式 インライン(javascript) javascript 内に変数式をインラインで記述する

scriptタグで th:inline=”javascript” を記述しておき、
インラインで記述したい変数式は  /*[[${変数式}]]*/ で記載。

<script th:inline=”javascript”>
function action(){
var val = document.getElementById(“text1”).value;
var res = parseInt(val * ((100 + /*[[${tax}]]*/) / 100));
document.getElementById(“msg”).innerHTML = “include tax: ” + res;
}
</script>
テンプレートフラグメント コンポーネント側のテンプレート
<○○ th:fragment=”fragment-name” >利用側のテンプレート
<●● th:include=”templeate-name :: fragment-name”>

PR

PR

-Thymeleaf

管理人

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした