Hotwire Turbo 不会取代 Turbo-frame，会引发警告：响应没有匹配的 <turbo-frame id=...> 元素

Question

我正在开始使用 Rails 6 中的 Hotwire 和 Turbo，但遇到 Turbo 无法替换我的 Turbo 框架的问题。我收到以下错误消息：Response has no matching <turbo-frame id="experiments"> element。

我通过控制器操作在页面上呈现以下内容：

<!-- index.html.erb -->
<turbo-frame id="experiments" src="/labs/experiments">
  <p>This message will be replaced by the response from /labs/experiments.</p>
</turbo-frame>

这正确地将请求发送到/labs/experiments，当我检查我的网络请求时，我的控制器返回以下内容：

<h2>Experiment 1</h2>
<h2>Experiment 2</h2>

但是，响应不会在我的涡轮框架内呈现，而是收到控制台日志警告：Response has no matching <turbo-frame id="experiments"> element。

如有任何帮助，我们将不胜感激:)

Answer 1

好吧，我知道发生了什么事。

长话短说

对 Turbo 帧请求的响应必须包含id与发送它的 Turbo 帧相同的内容。由于index.html.erb 中的turbo-frame 包含“experiments”id：

<!-- response from /labs/experiments wrapped in turbo-frame with id -->
<turbo-frame id="experiments"> 
  <h2>Experiment 1</h2>
  <h2>Experiment 2</h2>
</turbo-frame>

这完全解决了我收到的错误，并且 Turbo 开始使用服务器的结果填充 Turbo 帧。

完整示例erb

由于我还没有找到太多完整的示例，这里是我使用涡轮框架的简单示例（太棒了！）。请注意，路线、控制器方法（等）被故意过度简化，但对我的理解有很大帮助：

路线

get 'examples' => 'examples#index'
get 'examples/experiments' => 'examples#experiments'

控制器

get 'examples' => 'examples#index'
get 'examples/experiments' => 'examples#experiments'

意见

app/views/examples/index.html.erb

class ExamplesController < ApplicationController
  # renders some simple html, including a turbo-frame
  def index; end

  # renders the content of the turbo-frame
  def experiments
    @experiments = [
      { name: 'React Keyboarding Environment', url: '/keyboarding' },
      { name: 'Accessible Keyboarding', url: '/accessible' }
    ]
    render partial: 'experiments'
  end
end

app/views/examples/_experiments.html.erb

<%= turbo_frame_tag :experiments do %> 
  <% @experiments.each do |experiment| %>
  <h2><%= experiment[:name] %></h2>
  <% end %> 
<% end %>