5、利用 Turbo Streams 和 Stimulus 增强 Web 应用交互性

利用 Turbo Streams 和 Stimulus 增强 Web 应用交互性

1. Turbo Streams 扩展页面功能

Turbo Streams 是 Turbo 的一部分，可在不编写自定义 JavaScript 的情况下让页面更具动态性。我们可以将开发过程视为逐步增强，从一个可运行但需要更多交互性的页面开始，添加内联编辑、部分页面的响应式更新，现在要实现从一个请求更新页面的多个部分。

1.1 Turbo Streams 简介

Turbo Streams 允许向页面发送任意数量的 HTML 内容，并让这些内容替换或增强页面上多个任意位置的现有内容。它非常适合我们希望从单个请求更新页面多个部分的场景，并且能与 ActionCable 通过 WebSockets 很好地配合使用。

Turbo Stream 是一个自定义 HTML 标签 <turbo-stream> ，有两个属性和一个 template 子标签，通用形式如下：

<turbo-stream action="<ACTION>" target="<TARGET>">
  <template>
    OUR HTML GOES HERE
  </template>
</turbo-stream>

两个必需属性分别指定目标（即页面上要更改元素的 DOM ID）和操作（指定如何处理传入的 HTML），操作有以下五种：
| 操作 |