読者です 読者をやめる 読者になる 読者になる

thymeleafの基本的な記法を覚える その2


数日ぶりです!
この絵を描いたのはなんか「するめとめがね」とか名乗っておきながらめがねについて全く書いてなかったという背景があったりなかったりします!
するめの話が未だに出てない気がするのはさておき今日もやってみます!

リストの出力

リストの出力にはth:eachを使います。

<ul>
<li th:each="dto : ${dtoList}"><a th:href="${dto.url}" th:text="${dto.title}">title</a></li>
</ul>

こんな具合でdtoListのvalueをdtoとして参照出来るようになります。
前回の記事で書いた記述の簡略化も使うと以下のようにちょっとすっきりします。

<ul>
<li th:each="dto : ${dtoList}" th:object="${dto}"><a th:href="*{url}" th:text="*{title}">title</a></li>
</ul>
コーダーさんと連携するとき便利なテクニック

前々回の記事あたりでthymeleafはアプリを通さないと(純粋に作成した.htmlファイルを見ると)、thymeleaf特有の記述が影響しない純粋なHTMLが表示される的なことを書いたような書かなかったような気がしますが、th:removeを使うとその便利さをより実感することができます。

<ul>
<li th:each="dto : ${dtoList}" th:object="${dto}"><a th:href="*{url}" th:text="*{title}">title</a></li>
</ul>

これは上にも書いたコードですが、これを純粋にHTMLとして表示するとli要素は1つしか表示されません。
これだと、例えばCSSで偶数個目のli要素の背景の色を変えるといった制御をしていても確認が出来ません。こまる!
そこで便利なのがth:removeです!

<ul>
<li th:each="dto : ${dtoList}" th:object="${dto}"><a th:href="*{url}" th:text="*{title}">title</a></li>
<li th:remove="all"><a href="#">title2</a></li>
<li th:remove="all"><a href="#">title3</a></li>
</ul>

このようにすると、アプリを通した場合はth:eachの書かれたli要素が、アプリを通さなかった場合は3つのli要素が表示される形になります。
なにこれ便利…!


ただ要素を10個くらい追加してテストしたいみたいになると、それぞれにth:remove="all"を書く羽目になってめんどくさいですね。
そこで便利なのがall-but-firstです!

<ul th:remove="all-but-first">
<li th:each="dto : ${dtoList}" th:object="${dto}"><a th:href="*{url}" th:text="*{title}">title</a></li>
<li><a href="#">title2</a></li>
<li><a href="#">title3</a></li>
</ul>

このコードは一つ前のth:remove="all"を削除対象のli要素全てに書いていたコードを同じ挙動をします。
らくちん…!


th:removeの値には以下の4パターンあるので状況に応じて使い分けてみてください!

挙動
all 指定したタグと子要素を含めた全てが消える
body 指定したタグは残して子要素が全て消える
tag 子要素は残して指定したタグが消える
all-but-first 指定したタグにおける最初の子要素以外が消える

マップの出力

ドキュメントになかったので試行錯誤ですが…!
以下のようなMapをJavaからViewに返してるとします。

Map<String, TestDto> testMap = new HashMap<>();
TestDto dto1 = new TestDto();
dto1.setUrl("http://www.anime-chu-2.com/");
dto1.setTitle("中二病でも恋がしたい!");
testMap.put("key1", dto2);
TestDto dto2 = new TestDto();
dto2.setUrl("http://www.oniai.com/");
dto2.setTitle("お兄ちゃんだけど愛さえあれば関係ないよねっ");
testMap.put("key2", dto2);


これを全て表示するには、リスト同様th:eachと簡略化した書き方を使って以下のようにします。

<ul>
<li th:each="key : ${testMap.keySet()}" th:object="${testMap.get(key)}"><a th:href="*{url}" th:text="*{title}">title</a></li>
</ul>

変数が持つメソッドはthymeleafから呼び出すことが出来るので、今回はMapのkeySetメソッドを呼び出してそれをkeyとしてth:eachで繰り返し処理しています。
かんたんですね!


今日はこんなところ!
次はincludeかutilityあたりに触れるとおもいます!

スポンサーリンク