HTML 片段
HTMX 和 Hotwire Turbo 強調“HTML-over-the-wire”(透過網路傳輸 HTML)的方法,即客戶端以 HTML 而非 JSON 接收伺服器更新。這使得無需編寫大量甚至任何 JavaScript 即可獲得 SPA(單頁應用程式)的優勢。要了解更多資訊和概覽,請訪問它們各自的網站。
在 Spring MVC 中,檢視渲染通常涉及指定一個檢視和一個模型。然而,在“HTML-over-the-wire”中,一個常見的功能是傳送多個 HTML 片段,瀏覽器可以使用這些片段更新頁面的不同部分。為此,控制器方法可以返回 Collection<ModelAndView>。例如
-
Java
-
Kotlin
@GetMapping
List<ModelAndView> handle() {
return List.of(new ModelAndView("posts"), new ModelAndView("comments"));
}
@GetMapping
fun handle(): List<ModelAndView> {
return listOf(ModelAndView("posts"), ModelAndView("comments"))
}
同樣地,也可以透過返回專用型別 FragmentsRendering 來實現
-
Java
-
Kotlin
@GetMapping
FragmentsRendering handle() {
return FragmentsRendering.fragment("posts").fragment("comments").build();
}
@GetMapping
fun handle(): FragmentsRendering {
return FragmentsRendering.fragment("posts").fragment("comments").build()
}
每個片段可以有獨立的模型,並且該模型繼承了請求的共享模型的屬性。
HTMX 和 Hotwire Turbo 支援透過 SSE(伺服器傳送事件)進行流式更新。控制器可以使用 SseEmitter 來發送 ModelAndView,以便為每個事件渲染一個片段
-
Java
-
Kotlin
@GetMapping
SseEmitter handle() {
SseEmitter emitter = new SseEmitter();
startWorkerThread(() -> {
try {
emitter.send(SseEmitter.event().data(new ModelAndView("posts")));
emitter.send(SseEmitter.event().data(new ModelAndView("comments")));
// ...
}
catch (IOException ex) {
// Cancel sending
}
});
return emitter;
}
@GetMapping
fun handle(): SseEmitter {
val emitter = SseEmitter()
startWorkerThread{
try {
emitter.send(SseEmitter.event().data(ModelAndView("posts")))
emitter.send(SseEmitter.event().data(ModelAndView("comments")))
// ...
}
catch (ex: IOException) {
// Cancel sending
}
}
return emitter
}
同樣地,也可以透過返回 Flux<ModelAndView>,或任何其他可透過 ReactiveAdapterRegistry 適配到 Reactive Streams Publisher 的型別來完成。