探索Turbo和Stimulus：构建交互式Web应用

### 探索 Turbo 和 Stimulus：构建交互式 Web 应用 在 Web 应用开发中，实现交互性通常需要编写大量的 JavaScript 代码。不过，借助 Turbo 和 Stimulus 这两个工具，我们可以在减少 JavaScript 代码编写的情况下，为页面增添丰富的交互功能。接下来，我们将深入探讨 Turbo 和 Stimulus 的使用方法。 #### Turbo 框架简介 Turbo 框架包含 Turbo Streams 和 Turbo Frames 两个重要部分，它们能在不编写自定义 JavaScript 的情况下，为页面添加交互性。 ##### Turbo Streams 和 Turbo Frames 的区别 | 特性 | Turbo Streams | Turbo Frames | | ---- | ---- | ---- | | 可更改的 DOM 元素数量 | 可更改任意数量的 DOM 元素 | 只能更改一个 DOM 元素 | | 操作类型 | 可进行追加、前置、移除、替换或更新操作 | 仅更新元素的内部 HTML | | 受影响的元素类型 | 任何具有匹配 DOM ID 的 HTML 元素 | 必须是具有相同 DOM ID 的 turbo-frame 元素 | | 评估时机 | 在表单响应或 ActionCable 广播时评估 | 在 turbo-frame 元素内的任何导航时评估 | ##### Turbo Streams 的使用示例 以下是使用 Turbo Streams 进行操作的示例代码。在创建收藏时，我们使用 `append` 操作将收藏视图添加到收藏列表中，使用 `replace` 操作更新音乐会显示，并移除“暂无收藏音乐会”的文本。 ```erb <!-- app/views/favorites/create.turbo_stream.erb --> <%= turbo_stream.append("favorite-concerts-list", @favorite) %> <%= turbo_stream.replace(dom_id(@favorite.concert), @favorite.concert) %> <%= turbo_stream.update("no-favorites", "") %> ``` 在删除收藏时，我们使用 `remove` 操作移除收藏显示，使用 `replace` 操作更新音乐会显示，并在用户没有收藏时动态设置“暂无收藏音乐会”的文本。 ```erb <!-- app/views/favorites/destroy.turbo_stream.erb --> <%= turbo_stream.remove(dom_id(@favorite)) %> <%= turbo_stream.replace(dom_id(@favorite.concert), @favorite.concert) %> <% if current_user.favorites.empty? %> <%= turbo_stream.update("no-favorites") do %> No favorite concerts yet <% end %> <% end %> ``` ##### 懒加载 Turbo Frame 懒加载允许我们分离页面的静态和动态部分，使静态部分可以被缓存，动态部分在页面加载时自动填充。以下是实现收藏计数懒加载的步骤： 1. 在导航栏中添加占位符： ```erb <!-- app/views/layouts/_nav.html.erb --> <div class="flex justify-items-end text-gray-300 px-3 py-2 text-sm font-bold"> <span>Favorite Count:</span> <%= turbo_frame_tag( "favorites-count-number", src: favorites_path(count_only: true) ) do %> <span id="favorites-count" class="ml-2"> ? </span> <% end %> </div> ``` 2. 修改控制器方法以支持仅显示计数： ```ruby # app/controllers/favorites_controller.rb def index if params[:count_only] render(partial: "favorites/count") end end ``` 3. 创建计数部分视图： ```erb <!-- app/views/favorites/_count.html.erb --> <span>Favorite Count:</span> <%= turbo_frame_tag("favorites-count-number") do %> <span id="favorites-count" class="ml-2"> <%= current_user&.favorites&.count || 0 %> </span> <% end %> ``` 4. 在 Turbo Stream 中更新计数： ```erb <!-- app/views/favorites/create.turbo_stream.erb --> <%= turbo_stream.update( "favorites-count", plain: current_user.favorites.count ) %> ``` #### Stimulus 入门 虽然 Turbo 能实现很多交互功能，但有些交互，如动画效果或仅涉及客户端显示的更改，使用 Stimulus 来处理会更合适。Stimulus 是一个与 HTML 集成的 JavaScript 工具，特别适合处理 Turbo Frames 或 Turbo Streams 带来的 DOM 变化。 ##### Stimulus 基本概念 Stimulus 有几个核心概念，用于描述 HTML 标记与 JavaScript 代码之间的关系： - **Controllers**：Stimulus JavaScript 代码的存放