TurboBoost Streams 使用教程

TurboBoost Streams 使用教程

turbo_boost-streams Take full control of the DOM with Turbo Streams 项目地址: https://gitcode.com/gh_mirrors/tu/turbo_boost-streams

1. 项目介绍

TurboBoost Streams 是一个扩展 Turbo Streams 功能的工具，旨在让你完全控制浏览器的 Document Object Model (DOM)。通过 TurboBoost Streams，你可以在客户端调用任何 DOM 方法，从而实现更复杂的 DOM 操作。

TurboBoost Streams 适用于那些需要超越 CRUD（创建、读取、更新、删除）操作的场景。它允许你从服务器端直接操作客户端的 DOM，提供了极大的灵活性和控制能力。

2. 项目快速启动

安装

首先，确保你已经安装了 turbo-rails 和 @hotwired/turbo-rails。然后，安装 TurboBoost Streams：

bundle add "turbo_boost-streams" --version VERSION
npm install "@turbo-boost/streams@VERSION"

配置

在 Gemfile 中添加以下内容：

gem "turbo-rails", ">= 1.1", "< 2"
gem "turbo_boost-streams", "~> VERSION"

在 package.json 中添加以下内容：

"dependencies": {
  "@hotwired/turbo-rails": ">=7.2",
  "@turbo-boost/streams": "^VERSION"
}

在 app/javascript/application.js 中导入 TurboBoost Streams：

import '@hotwired/turbo-rails';
import '@turbo-boost/streams';

使用示例

以下是一个简单的示例，展示如何在控制台中输出 "Hello World"：

turbo_stream.invoke "console.log", args: ["Hello World"]

3. 应用案例和最佳实践

案例1：动态更新页面内容

假设你有一个博客应用，当用户发布新文章时，你希望所有订阅该博客的用户都能看到新文章的通知。你可以使用 TurboBoost Streams 来实现这一功能：

# app/models/post.rb
class Post < ApplicationRecord
  after_save do
    broadcast_invoke "console.log", args: ["New post: #{title}"]
  end
end

案例2：DOM 操作

你可以使用 TurboBoost Streams 来动态修改页面的 DOM 结构。例如，插入一个新的 HTML 元素：

turbo_stream.invoke "document.body.insertAdjacentHTML", args: ["afterbegin", "<h1>Hello World</h1>"]

最佳实践

1. 避免过度使用：虽然 TurboBoost Streams 提供了强大的功能，但应避免过度使用，尤其是在简单的 CRUD 操作中。
2. 保持代码简洁：尽量保持代码简洁，避免复杂的 DOM 操作逻辑。
3. 测试覆盖：确保你的应用有足够的测试覆盖，特别是在使用 TurboBoost Streams 进行复杂的 DOM 操作时。

4. 典型生态项目

Turbo Rails

Turbo Rails 是 TurboBoost Streams 的基础依赖之一，它提供了 Hotwire 的核心功能，包括 Turbo Drive、Turbo Frames 和 Turbo Streams。

Hotwire

Hotwire 是一个现代的 Web 开发框架，旨在通过减少 JavaScript 的使用来提高开发效率。TurboBoost Streams 是 Hotwire 生态系统的一部分，提供了更高级的 DOM 操作能力。

Rails

Rails 是一个全栈 Web 开发框架，广泛用于构建现代 Web 应用。TurboBoost Streams 与 Rails 无缝集成，提供了强大的后端支持。

通过这些生态项目，TurboBoost Streams 能够与现有的 Rails 和 Hotwire 应用无缝集成，提供更强大的功能和更好的开发体验。

turbo_boost-streams Take full control of the DOM with Turbo Streams 项目地址: https://gitcode.com/gh_mirrors/tu/turbo_boost-streams