Hotwire Turbo未替换turbo帧，抛出警告:响应没有匹配的< 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帧中呈现，相反，我收到了一个控制台日志警告：Response has no matching <turbo-frame id="experiments"> element。

如有任何帮助，我们将非常感谢:)

Answer 1

好吧，我知道是怎么回事了。

TL;DR

对加速帧请求的响应必须包含与发送它的加速帧相同的id。因为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-frame。

erb的完整示例

由于我还没有找到太多完整的示例，这里是我使用turbo帧的简单示例(这太棒了！)请注意，路由、控制器方法(等)有意过于简化，但对我的理解有很大帮助：

路线

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

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