変数式の使い方
| 基本 | 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=”${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> |
| プリプロセッシング | __${変数式}__ アンダースコア２つずつで挟む 変数式に数式等をテキストでバインドしておき、上記記述で式が評価される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”> |