HTML 片段

ChatGPT-4o-mini 中英对照 HTML Fragments

查看在 Reactive 栈中的等效项

HTMX 和 Hotwire Turbo 强调了一种 HTML-over-the-wire 的方法，客户端接收服务器以 HTML 格式而非 JSON 格式的更新。这使得可以享受到 SPA（单页面应用）的好处，而无需编写大量甚至任何 JavaScript。有关详细概述和更多信息，请访问它们各自的网站。

在 Spring MVC 中，视图渲染通常涉及指定一个视图和一个模型。然而，在 HTML-over-the-wire 中，一个常见的功能是发送多个 HTML 片段，浏览器可以使用这些片段来更新页面的不同部分。为此，控制器方法可以返回 Collection<ModelAndView>。例如：

Java

@GetMapping
List<ModelAndView> handle() {
    return List.of(new ModelAndView("posts"), new ModelAndView("comments"));
}

java

Kotlin

@GetMapping
fun handle(): List<ModelAndView> {
    return listOf(ModelAndView("posts"), ModelAndView("comments"))
}

kotlin

同样也可以通过返回专用类型 FragmentsRendering 来实现：

Java

@GetMapping
FragmentsRendering handle() {
    return FragmentsRendering.with("posts").fragment("comments").build();
}

java

Kotlin

@GetMapping
fun handle(): FragmentsRendering {
    return FragmentsRendering.with("posts").fragment("comments").build()
}

kotlin

每个片段可以拥有一个独立的模型，而该模型从请求的共享模型中继承属性。

HTMX 和 Hotwire Turbo 支持通过 SSE（服务器发送事件）进行流式更新。控制器可以使用 SseEmitter 发送 ModelAndView 以在每个事件中渲染一个片段：

Java

@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;
}

java

Kotlin

@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
}

kotlin

同样也可以通过返回 Flux<ModelAndView>，或者通过 ReactiveAdapterRegistry 适配到 Reactive Streams Publisher 的任何其他类型来实现。