ruby-on-rails - Hotwire Turbo 不替换涡轮框架，抛出警告 : Response has no matching 元素

Question

我开始在 Rails 6 中使用 Hotwire 和 Turbo，但遇到 Turbo 无法替换我的 Turbo 框架的问题。我收到以下错误消息:Response has no matching <turbo-frame id="experiments"> element .
我从 Controller 操作在页面上呈现以下内容:

<!-- 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 ，当我检查我的网络请求时，我的 Controller 返回以下信息:

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

但是，响应并未在我的 turbo-frame 内呈现，而是收到控制台日志警告: Response has no matching <turbo-frame id="experiments"> element .
任何帮助表示赞赏:)

Answer 1

好吧，我知道发生了什么。
TL; 博士
对 turbo-frames 请求的响应必须包含相同的 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-frames 的简单例子(太棒了!)。请注意，路线、 Controller 方法(等)有意过度简化，但对我的理解有很大帮助:
路线

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

Controller

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 %>