Hotwire - Turbo Drive 笔记

Turbo Drive的工作原理是拦截链接的 "点击 "事件和表单的 "提交 "事件，转换为AJAX请求来加速 Rails 应用。

每次点击链接时，Turbo Drive都会拦截 "点击 "事件，通过将点击链接时通常会触发的HTML请求转化为AJAX请求来覆盖默认的行为。当Turbo Drive收到响应时，它会将当前页面的替换为响应的，在大多数情况下，不做改变。

Turbolinks是Turbo Drive的祖先：它只拦截对链接的点击，而不是表单提交。现在Turbo也处理表单提交，作者将该库从Turbolinks改名为Turbo Drive。

全局禁用 Turbo Drive

// app/javascript/application.js
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

链接禁用 Turbo Drive

<%= link_to "New post", new_post_path, class: "btn btn--primary", data: { turbo: false } %>

form 禁用

<%= form_with post, html: {
                      class: "post form",
                      data: { turbo: false }
                    } do |f| %>

用data-turbo-track="reload "重新加载页面

<%# app/views/layouts/application.html.erb %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

data-turbo-track="reload " 监控 assets 变化，如果有差异，Turbo Drive将重新加载整个页面。

Turbo Drive Form responses must redirect to another location 重定向显示错误信息需要添加如下:

render :new, status: :unprocessable_entity
render :edit, status: :unprocessable_entity

无效的表单提交必须返回422状态代码，以便Turbo Drive替换页面的并显示表单错误。422 状态代码在 Rails 中的别是:unprocessable_entity。

改变 Turbo Drive progress bar 样式

.turbo-progress-bar {
  background: 
}