3

我正在尝试从 Turbolinks 升级到 Turbo，但我发现客户端没有为表单提交呈现重定向。

版本：

  • 导轨 6.1.4
  • hotwire-rails 0.1.2
  • @hotwired/turbo-rails 7.0.0-beta.8

我暂时忽略了 Turbo 和 Devise 之间的不兼容性——只是试图让常规表单工作而不必禁用它们上的 Turbo。

这是一个示例操作：

def update
  authorize @label
  @label.update(label_params)
  if @label.save
    redirect_to document_labels_path(document_id: @document.id)
  else
    render :new, status: :unprocessable_entity
  end
end

这是一个呈现的形式：

<form class="simple_form new_label" id="label_form" novalidate="novalidate" action="/documents/72/labels" accept-charset="UTF-8" method="post">
...
</form>

提交有效表单时，服务器会说Processing by LabelsController#create as TURBO_STREAM并正确提供 302。然后它将为重定向位置提供 200。然而，浏览器只查看提交的表单。将重定向状态更改为 303 不会改变任何内容。

我为每个 Turbo 事件添加了一个 console.log：

document.addEventListener("turbo:load", function () {
  console.log('TURBO:LOAD')
})
document.addEventListener("turbo:click", function () {
  console.log('TURBO:CLICK')
})
document.addEventListener("turbo:before-visit", function () {
  console.log('TURBO:BEFORE-VISIT')
})
document.addEventListener("turbo:visit", function () {
  console.log('TURBO:VISIT')
})
document.addEventListener("turbo:submit-start", function () {
  console.log('TURBO:SUBMIT-START')
})
document.addEventListener("turbo:before-fetch-request", function () {
  console.log('TURBO:BEFORE-FETCH-REQUEST')
})
document.addEventListener("turbo:before-fetch-response", function () {
  console.log('TURBO:BEFORE-FETCH-RESPONSE')
})
document.addEventListener("turbo:submit-end", function (event) {
  console.log('TURBO:SUBMIT-END')
  // event.detail
})
document.addEventListener("turbo:before-cache", function () {
  console.log('TURBO:BEFORE-CACHE')
})
document.addEventListener("turbo:before-stream-render", function () {
  console.log('TURBO:BEFORE-STREAM-RENDER')
})
document.addEventListener("turbo:render", function () {
  console.log('TURBO:RENDER')
})

这是成功提交表单的输出：

TURBO:BEFORE-FETCH-REQUEST
TURBO:SUBMIT-START
TURBO:BEFORE-FETCH-RESPONSE
TURBO:SUBMIT-END

没有渲染事件。调查它似乎完全意识到客户端应该重定向，它只是没有event.detail.fetchResponse.response。turbo:submit-end

Response {type: "basic", url: "http://lvh.me:3000/documents/72/labels", redirected: true, status: 200, ok: true, …}
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: true
status: 200
statusText: "OK"
type: "basic"
url: "http://lvh.me:3000/documents/72/labels"
__proto__: Response
4

2 回答 2

6

这里发生的是您的应用程序指定它更喜欢 turbo-stream 响应而不是 text/html 响应。如果您要查看重定向页面的请求标头，您可能会看到以下内容：

Accept: text/vnd.turbo-stream.html, text/html, application/xhtml+xml

因此，Rails 返回具有它识别的第一种类型的数据，即text/vnd.turbo-stream.html. 浏览器中的 Turbo 会看到这一点，并且由于它不能被解释为 Turbo Stream，因此无助地默默地忽略它。

解决方案（解决方法？）是确保您重定向到页面的html版本：

redirect_to document_labels_path(document_id: @document.id, format: :html)

这将返回 Content-Type 为 的页面text/html，Turbo 将用内容替换整个页面。

于 2021-08-06T02:07:44.043 回答
0

加入 Jeff Seifert 的出色回答。

如果您不需要 turbo 流，您也可以turbo-stream通过将其放入初始化程序中来完全取消注册内容类型，例如config/initializers/turbo.rb：

Rails.application.config.after_initialize do
  Mime::Type.unregister(:turbo_stream)
end
于 2022-02-12T15:12:25.613 回答