HTML 片段

HTMX 和 Hotwire Turbo 强调 HTML-over-the-wire 方法，客户端接收服务器更新是 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.with("posts").fragment("comments").build();
}
@GetMapping
fun handle(): FragmentsRendering {
	return FragmentsRendering.with("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 的类型来完成相同的操作。