back
テンプレートの利用 (4/6)
■コントローラーからビューに値を渡す
テンプレートを利用する利点は、コントローラ側からビュー側に必要な情報を受け渡したりすることが簡単に行える、という点にあります。実際にやってみましょう。
下に簡単なサンプルを掲載しておきました。index.htmlとapp.groovyをそれぞれ書き換えて下さい。そしてspring runで実行し、表示を確かめてみましょう。タイトルにHello!、その下にwelcome to Thymeleaf!とテキストが表示されます。が、これらのテキストはindex.htmlには書かれていません。コントローラーで用意した値がそのまま出力されているのです。
●コントローラー側の処理
まずは、コントローラー側で、値を保管する部分を見てみましょう。これは、以下のように行っています。
●値の出力
ModelAndViewに保管された値は、式言語を使って簡単に出力することができます。以下の部分です。
ところで、ここでは値を表示するのに「th:text」という属性を使っています。これらは、Thymeleafのテンプレート機能で、このth:textに設定された値がそのままタグのテキストとして表示されるようになっています。普通に考えれば、
下に簡単なサンプルを掲載しておきました。index.htmlとapp.groovyをそれぞれ書き換えて下さい。そしてspring runで実行し、表示を確かめてみましょう。タイトルにHello!、その下にwelcome to Thymeleaf!とテキストが表示されます。が、これらのテキストはindex.htmlには書かれていません。コントローラーで用意した値がそのまま出力されているのです。
●コントローラー側の処理
まずは、コントローラー側で、値を保管する部分を見てみましょう。これは、以下のように行っています。
mv.addObject("title","Hello!");
mv.addObject("msg","welcome to Thymeleaf!");「addObject」は、ModelAndViewに値を保管するものです。第1引数に名前を指定し、第2引数に保管するオブジェクトを指定します。ここでは、"title"と"msg"という名前でそれぞれテキストが保管されたことがわかります。●値の出力
ModelAndViewに保管された値は、式言語を使って簡単に出力することができます。以下の部分です。
<h1 th:text="${title}" />
<p th:text="${msg}" />この${title}と${msg}が、それぞれModelAndViewに保管したtitleとmsgを出力する部分です。こんな具合に、ModelAndViewに保管した値の名前をそのまま式言語で書くだけで、その値が出力できてしまうのです。実に簡単！ところで、ここでは値を表示するのに「th:text」という属性を使っています。これらは、Thymeleafのテンプレート機能で、このth:textに設定された値がそのままタグのテキストとして表示されるようになっています。普通に考えれば、
<h1>${title}</h1>
<p>${msg}</p>こんな形で書けばいいように思えますが、これでは正しくテキストは出力されません。${title}といったテキストがそのまま書きだされてしまうのです。式言語による出力は、Thymeleafが用意する「th:○○」という属性の値に指定するようにしてください。(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>top page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1 th:text="${title}" />
<p th:text="${msg}" />
</body>
</html>
※app.groovy
@Grab("thymeleaf-spring4")
@Controller
class MyBootApp {
@RequestMapping("/")
@ResponseBody
def top(ModelAndView mv) {
mv.setViewName("index")
mv.addObject("title","Hello!");
mv.addObject("msg","welcome to Thymeleaf!");
}
}
| << 前へ | 次へ >> |