th:href内に変数を設置し、ページごとに動的なリンクを作成したい。

##環境

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>

アドバイスいただきたいです。
宜しくお願いします。

m.ts10806

2021/03/26 22:58

結局変数はコントローラから渡されるので、コントローラも必要なのでは。 @{}の中で変数を使うのは幾らでも出来そうな気がしますが、どういう値を元にどういう情報を出力したいのかを具体的に記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

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

gpsoft

総合スコア1323

pepe0730

2021/03/27 03:21

うまくフラグメント部分にも値を共有することができました。ありがとうございます。 th:withで生成した変数もスコープを意識しないといけないということですね。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

さがす

関連した質問