Q&A
結局変数はコントローラから渡されるので、コントローラも必要なのでは。
@{}の中で変数を使うのは幾らでも出来そうな気がしますが、どういう値を元にどういう情報を出力したいのかを具体的に記載してください。
##環境
spring 2.4
java11
mac OS
##実現したいこと
index.htmlとshow.htmlで変数を生成し、その変数をfooter.htmlで使用。
その変数をaタグのhref値に組み込みページ毎にリンク先が変わるものを作りたいと考えていました。
しかし、th:hrefは機能せずリンクが生成されない状況となってしまいました。
##やってみたこと
footer.htmlのth:hrefでローカル変数を参照するとき、
リテラル置換で記述してみました。
しかし、値はnullになりました。
<footer th:fragment="footer1"> <div class="icon-wrapper d-flex"> <a href="#" th:href="@{| ${top} |}" class="d-block"><i class="fas fa-search"></i></a> <a href="#" th:href="@{| ${liked} |}" class="d-block"><i class="fas fa-thumbs-up"></i></a> <a href="#" th:href="@{| ${message} |}" class="d-block"><i class="fas fa-comment-dots"></i></a> <a href="#" th:href="@{| ${show} |}" class="d-block"><i class="far fa-user-circle"></i></a> </div> </footer>
##ソースコード
footer.html(フラグメント)
<!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="footer1"> <div class="icon-wrapper d-flex"> <a href="#" th:href="@{${top}}" class="d-block"><i class="fas fa-search"></i></a> <a href="#" th:href="@{${liked}}" class="d-block"><i class="fas fa-thumbs-up"></i></a> <a href="#" th:href="@{${message}}" class="d-block"><i class="fas fa-comment-dots"></i></a> <a href="#" th:href="@{${show}}" class="d-block"><i class="far fa-user-circle"></i></a> </div> </footer> </html>
index.html(呼び出し元①）
<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link th:href="@{/css/style.css}" rel="stylesheet"> <script src="https://kit.fontawesome.com/b24292ab52.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <main> <div class="container"> <div class="search-wrapper"> <h2>さがす</h2> <form method="get"> <input type="text"> <button><i class="fas fa-search"></i></button> </form> </div> <table> <tr th:each="user: ${users}"> <td class="red" th:text="${user.name}"></td> <td th:text="${user.profile}"></td> </tr> </table> </div> </main> <th:block th:with="top=${'/users'}, liked=${'/users/liked'}, message=${'/users/message'}, show=${'/uesrs/show'}"> </th:block> <div th:replace="/commons/footer::footer1"></div> </body> </html>
show.html(呼び出し元②)
<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link th:href="@{/css/style.css}" rel="stylesheet"> <script src="https://kit.fontawesome.com/b24292ab52.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <main> <div class="container"> <p sec:authentication="principal.user.name"></p> <p sec:authentication="principal.user.email"></p> <p sec:authentication="principal.user.image"></p> <p sec:authentication="principal.user.profile"></p> <p sec:authentication="principal.user.age"></p> <p sec:authentication="principal.user"></p> formです。 <form th:action="@{edit}" action="#" method="get"> <input type="hidden" name="key" th:value="${key}"> <button type="submit">edit</button> </form> </div> </main> <th:block th:with="top=${'/users'}, liked=${'/users/liked'}, message=${'/users/message'}, show=${'show'}"> <div th:replace="/commons/footer::footer1"></div> </body> </html>
アドバイスいただきたいです。
宜しくお願いします。
回答1件
0
ベストアンサー
footer1フラグメントの方はth:href="@{${top}}"のような書き方で問題ないと思います。
ちなみに、th:href="@{/hoge/fuga/{id}/view(id=${userId})}"のような記法も知っておくと便利ですよ({id}の部分が、変数userIdの値で置き換わる)。
本題ですが、
おそらく問題は、呼び出し元の方にあります(裏付けはとってないので違ってたらすみません)。
html
1<th:block th:with="top=${'/users'}, ..."> 2</th:block> 3<div th:replace="/commons/footer::footer1"></div>
th:withでセットした変数のスコープは「その要素の内部のみ」だと思います。なので、th:replaceをth:blockの内側に入れてみてください。
html
1<th:block th:with="top=${'/users'}, ..."> 2 <div th:replace="/commons/footer::footer1"></div> 3</th:block>
あるいは、わざわざth:blockを使わなくても、外側の要素(この例の場合body)にth:withを付けても良いと思います。
html
1<body th:with="top=${'/users'}, ..."> 2 ... 3 ... 4 <div th:replace="/commons/footer::footer1"></div> 5</body>
ひょっとすると、↓これだけで良いかも?
html
1<div th:with="top=${'/users'}, ..." 2 th:replace="/commons/footer::footer1"></div>
あと蛇足ですが、top=${'/users'}は、top='/users'と書くのと変わらない気がします。
投稿2021/03/26 23:56
総合スコア1323
うまくフラグメント部分にも値を共有することができました。
ありがとうございます。
th:withで生成した変数もスコープを意識しないといけないということですね。
あなたの回答
tips
プレビュー
