5、利用 Turbo 和 Stimulus 提升网页交互性

利用 Turbo 和 Stimulus 提升网页交互性

1. Turbo Streams 简介

在网页开发中，我们常常希望页面能更具交互性，而又不想编写大量自定义 JavaScript 代码。Turbo Streams 就是实现这一目标的利器。它允许我们在不刷新整个页面的情况下，更新页面的多个部分。

2. 初始问题与 Turbo Streams 的引入

最初，点击“设为收藏”或“移除收藏”按钮时，仅收藏部分会更新，音乐会显示行却无变化。我们期望请求响应能让 Turbo 同时更新收藏部分和音乐会显示行，而不影响页面其他部分，这时 Turbo Streams 就派上用场了。

3. Turbo Streams 基础

Turbo Streams 是一种自定义 HTML 标签 <turbo-stream> ，它有两个属性和一个子标签 <template> 。属性必须包含 action 属性以及单个 target 或多个 targets 属性。其通用结构如下：

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