サーバーサイドで表示するDOMを作成したい（sprinboot+thymeleaf）

Question

表示するタグ要素をサーバーサイド側で作成して、表示することは可能でしょうか

例えば、サーバーサイド側で

MOdel model = new Model();
model.addAttribute("test","<p>テスト</p>");
return "ビュー";

ビュー側で

[[${test}]]

とすると、文字列として

<p>テスト</p>

と表示されます。

これをthymeleafに

<p th:text="${test}"></p>

と書いたときと同じようにDOMとして持たせることは可能でしょうか。

ダメ元なのですが、解決方法をご存じの方
ご教授いただけないでしょうか

Comments

[m.ts10806]

なぜそうしたいのか分かりません。具体的に記載してください。

Answer 1

単に[[]]とすることでエスケープさせてるからかなと思いますけど。

• Thymeleaf 3 で JavaScript をエスケープせずに出力する

ただ、「サーバーサイドからHTML送って何がしたいのか」というところが今ひとつ分かりません。
「可能だけど、なぜそうしたいのか」というところ、知りたいですね。
絶対にないとは言い切れないけど「何のためのTymeleafなのか？」という疑問がありますので。

Comments

[takuya_atsugi]

・やりたいこと
カレンダー作成

・前提
mockがtableで作成されている
表示は月ごとで、横軸が時間（30分刻み）縦軸が日付
2時間の予定の時は<tr colspan="4"class="色付け">予定名</tr>のように書く必要がある
予定をクリックするとモーダルウィンドウが表示され、編集→登録できる
絶対このデザイン！と決められてる（それがモックのやつ）

・なぜサーバーサイドでやりたかったのか
それが先に思い付いただけ（完成までのイメージができただけ）

表示月はgetパラメータで渡して、一日の予定を保持するbeanを作成して、listの中にそのbeanを入れてthymeleafで繰り返し取り出していけば作成できるなー、と。

[m.ts10806]

>そのbeanを入れてthymeleafで繰り返し取り出していけば作成できるなー

その志向と「サーバーサイドで表示するDOMを作成したい」は一致しないのでは。
bean渡してthymeleafで取り出すわけですし、コントローラ側でHTML作成することにはならないと思います。
いずれにしてもviewに準ずる情報があちこちに散らばっていると可読性もメンテナンス性も可用性も悪い作りになってしまうのでは。。。

[takuya_atsugi]

おっしゃる通りですね。

ただ、他に思い付いたのが
「ajaxでスケジュールを取りに行ってjsonで返してもらってdomを書き換える」くらいしかないのです。
（jQueryで書き換えます）
他の方法があれば、ご教授いただけますでしょうか

[m.ts10806]

具体的な仕様や実際のコード、テーブル構造などが提示されていないとなんとも言えませんが、別にajaxでなくても良いのでは。
viewにデータを渡すのはかわりません。

ajaxでいいとして、Thymeleafを結果で返せばサーバーサイドでHTML組む必要ないのでは。

質問に書いてある現象だけなら回答に書いた通り、「エスケープしない」で解消可能です。

[takuya_atsugi]

お付き合いいただきありがとうございました。
とても参考になりました。

[m.ts10806]

結局、どのように解決とされたのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2

[takuya_atsugi]

とりあえずajaxで予定取ってきて、それをもとにjsで予定の書き込みを行うことにしました。
thymeleafを結果で渡せばいいということでしたが、動的に<tr>のcolspanを操作するロジックをサーバーサイドで実装する方法が思い浮かばなかったため、フロントに予定を渡した後それを行うことにしました。

javaではその月の予定を取得
jsでその後という形です。

[m.ts10806]

了解です。質問自体と解決方法に繋がりがないのは気になりますが、
前提や背景はなるべく質問にはじめから盛り込むようにしてください。
質問は編集できますので。