使用链轮将Hotwire添加到现有的Rails 6.1应用程序

基础概念

Hotwire 是一个由 Basecamp 开发的前端框架，旨在简化 Rails 应用程序中的实时交互和数据更新。它通过 Turbo（前身是 Turbolinks）和 Stimulus.js 实现页面无刷新更新，从而提高用户体验。

链轮（Gems） 在 Ruby on Rails 中是指第三方库，可以通过 Gemfile 引入并安装，以扩展或增强 Rails 应用程序的功能。

类型与应用场景

Turbo：用于页面内容的无刷新加载。
Stimulus：用于添加交互性，如表单验证、动态内容更新等。
Hotwire：整合了 Turbo 和 Stimulus，提供了一个完整的解决方案。

这些工具特别适用于需要频繁数据更新和实时交互的应用程序，如聊天应用、实时仪表板或在线协作工具。

添加 Hotwire 到 Rails 6.1 应用程序的步骤

添加 Gem 到 Gemfile

gem 'hotwire-rails'

安装 Gems

在终端运行以下命令：

bundle install

运行安装脚本

rails hotwire:install

此命令会自动添加必要的 JavaScript 和 CSS 文件，并创建 Stimulus 控制器目录。

配置布局文件

确保 app/views/layouts/application.html.erb 包含了 Hotwire 所需的标签：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= turbo_include_tags %>
<%= stimulus_include_tags %>

开始使用 Hotwire

现在可以在视图中使用 <turbo-frame> 和 <turbo-stream> 标签，以及在控制器中使用 respond_to 方法来返回 Turbo 流格式的响应。

示例代码

在视图中：

<turbo-frame id="comments">
  <%= render @comments %>
</turbo-frame>

<%= form_with model: [@post, @comment], local: true, data: { controller: "comments", action: "ajax:success->comments#append" } do |form| %>
  ...
<% end %>

在控制器中：

def create
  @comment = @post.comments.new(comment_params)
  respond_to do |format|
    if @comment.save
      format.turbo_stream { render turbo_stream: turbo_stream.append('comments', partial: 'comments/comment', locals: { comment: @comment }) }
    else
      format.html { render :new }
    end
  end
end