Hotwire Turbo不能替代turbo-frame，会抛出警告：响应中没有匹配的< turbo-frame id = ...>元素。

Question

我正在使用Rails 6的Hotwire和Turbo，但是在使用Turbo替换我的turbo-frame时遇到了问题。我收到以下错误消息：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>

然而，响应并没有在我的 turbo-frame 中呈现，反而我收到了一个控制台日志警告：Response has no matching <turbo-frame id="experiments"> element。

欢迎任何帮助 ：）

- Matt

Answer 1

好的，我已经弄清楚了发生了什么。

简短概括

对于 turbo-frames 请求的响应必须包含与发送请求的 turbo-frame 相同的 id。由于在 index.html.erb 中的 turbo-frame 包含 id 为 'experiments'：

<!-- 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-frame。

使用erb的完整示例

由于我还没有找到太多完整的示例，这是我使用turbo-frames的简单示例（它们非常棒！）。请注意，路由、控制器方法等故意过度简化，但在我的理解中有很大帮助：

路由

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

控制器

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/index.html.erb

<h1>Examples#index</h1>

<turbo-frame id="experiments" src="/examples/experiments">
  <p>This message will be replaced by the response from /experiments.</p>
</turbo-frame>

app/views/examples/_experiments.html.erb

→

app/views/examples/_experiments.html.erb

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

- Matt