出现“内容丢失”的 Turbo Frame 错误

我正在尝试在 Rails 应用程序中使用turbo_frame_tag 来管理一些任务。我为我的任务创建了一个脚手架。

我将要使用的页面包装在 Turbo 框架标签内，如下所示：

<%= turbo_frame_tag "modal" do %>

      <h1>New task</h1>
      <%= render "form", task: @task %>
      <br>
      <div>
        <%# <%= link_to "Back to tasks", tasks_path %> %>
        <%= link_to "Cancel", "#", data: {
          controller: "modals",
          action: "modals#close"
        }, class: "cancel-button" %>
      </div>

<% end %>

在此输入图像描述

在我的主页 index.html.erb 文件中，我使用相同的标签将数据添加到“添加”按钮：

<%= link_to "Add", new_task_path, data: { turbo_frame: "modal" }, class: "btn btn-secondary", remote: true %>

该模式工作正常。当我单击主页上的“添加”按钮时，它将打开。当我尝试提交操作来创建新任务时，我在终端上看到 200 响应，并且新任务已添加到我的数据库中。

但是（也）我在主页上收到“内容缺失”文本信息。该页面未重新加载。在开发者浏览器中我收到此错误：

turbo.es2017-esm.js:3650 Uncaught (in promise) Error: The response (200) did not contain the expected \<turbo-frame id="modal"\> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.
at c.delegateConstructor.throwFrameMissingError (turbo.es2017-esm.js:3650:15)
at c.delegateConstructor.handleFrameMissingFromResponse (turbo.es2017-esm.js:3646:14)
at c.delegateConstructor.loadFrameResponse (turbo.es2017-esm.js:3567:18)
at async c.delegateConstructor.loadResponse (turbo.es2017-esm.js:3441:34)

在此输入图像描述

我刚刚开始学习 Ruby on Rails，一切对我来说都是新的。如果有人遇到这样的问题以及如何处理它，我将不胜感激任何帮助和信息。

此行为在此进行了介绍和记录PR。请注意，hotwire 文档已更新为推荐解决方案.

您可以指定页面应该重定向而不是呈现Content Missing添加 [turbo 访问控制标签] 时出错（https://turbo.hotwired.dev/reference/attributes#meta-tags).

为了使它更容易，您可以使用涡轮辅助方法。

<!-- show.html.erb -->

<meta name="turbo-visit-control" content="reload">

<!-- or -->

<%= turbo_page_requires_reload %>

或者，您可以显式添加data: {turbo_frame: "_top"}指定链接应脱离turbo_frame。