10

我开始在 Rails 6 中使用 Hotwire 和 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。

任何帮助表示赞赏:)

4

1 回答 1

7

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

TL;博士

对 turbo-frames 请求的响应必须包含与id发送它的 turbo-frame 相同的内容。由于 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

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

路线

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 %>
于 2021-10-25T18:16:24.877 回答