logo标签列表

链接到Turbo Frame无法工作，导航到完整页面而不是局部更新

ruby-on-railsturboturbo-frames
11
我有以下代码：
<%= turbo_frame_tag :my_frame do %>
  frame
<% end %>

<%= link_to "About", about_path, data: { turbo_frame: :my_frame } %>

当我点击“关于”链接时，框架的内容没有得到更新。相反，整个页面导航到about_path。
我知道这不是上面代码的问题，因为我在一个新应用程序中测试了完全相同的代码，它正常工作。这个应用程序有什么不同之处，使得这个turbo frame链接无法工作呢？
有什么想法吗？
1
你真的需要做一些功课，找出这个应用程序有什么不同之处。检查网络浏览器控制台，确保没有错误，并且您实际上获得了您所期望的资源。 - max
1
不应该是 data: { 'turbo-frame' => :my_frame } 吗？ - Tun
1
当这个erb被渲染时，元素的输出会变成data-turbo-frame="my_frame"。你提出的建议和原问题中的代码都是有效的。但这是一个需要注意的好考虑。 - James Klein
我曾经遇到过完全相同的问题。在我的情况下，这是因为我在测试中使用了一个与 dom 中先前 id 相对应的框架名称。当您添加一个框架名称时，请不要忘记，在 dom 中它将是 <turbo-frame id="YOUR_FRAME_NAME">，并且必须是唯一的。 - jpheos
我的问题是尝试使用不同的布局文件，但当这种情况发生时，它根本不会正确响应。 - Sean Szurko
10个回答
3

虽然我回答有点晚，但我在遇到同样的问题后找到了你的问题。在我的情况下，我试图在表格内使用turbo_frame_tag，但它不起作用，因为表格不接受除自己之外的任何其他元素：https://github.com/hotwired/turbo/issues/48

2
在我的情况下，是因为application.js中没有导入hotwire。我只需添加：import "@hotwired/turbo-rails"就可以了。
这很奇怪，因为我在turbo-rails gem中没有看到任何关于此的要求，并且在运行安装rake任务后也没有进行这些更改。
我的应用程序是基于Rails 6的。
在我的Symfony 6应用程序中也有类似的情况，我需要手动编辑controllers.json文件，将@symfony/ux-turbo添加为一个控制器。你也可以直接在你的js文件中导入@hotwired/turbo。 - undefined
1
原来你必须将响应包装在相同命名的 turbo 标签中。
在你的初始调用中。
<%= turbo_frame_tag :my_frame do %>
  frame content
<% end %>

你的回应应该被包装成这样：

<%= turbo_frame_tag :my_frame do %>
  response generated on server.
<% end %>
0
只是为了增加可能出错的事项列表：
过去的某个阶段，当导航菜单上的按钮都不需要 turbo 时，我在文档树的更高位置（导航菜单上）添加了 `data-turbo="false"`。这当然会禁用任何后代链接的 turbo。
0

在link_to标签中应该是data: {"turbo-frame"=> "my_frame"}。我认为它没有将my_frame理解为符号，或者可能是哈希表中的turbo_frame键。

0
我刚刚解决了一个类似的问题。问题出在我请求的视图标签中有一个拼写错误。这个错误在控制台中显示为：

A matching frame for #show_client was missing from the response, transforming into full-page Visit.

这意味着你应该确保你请求的资源是正确的，否则Rails会回退到替换整个页面来响应你的链接请求。
0
这可能与我的情况有关，但我也遇到了同样的问题。
结果发现它是在一个刺激控制器的范围内，我的链接所在的父元素上有一个 .stopPropagation()。
移除 .stopPropagation() 后，turbo-frame 链接再次按预期工作。
0
以下是一些可能解决您问题的想法：
1. 您没有包含 hotwired/turbo 和 hotwired/turbo-rails 的 js 库。您可以通过以下方式添加它们：
# this will add the library to your importmaps

./bin/importmap pin @hotwired/turbo-rails 


# import libs in app/javascript/application.js

import "@hotwired/turbo"
import "@hotwired/turbo-rails"

2. 你正在使用一个自定义布局。
class ApplicationController < ActionController::Base
    layout :layout_by_resource

    private

    def layout_by_resource
        # turbo frames fix https://github.com/hotwired/turbo-rails#a-note-on-custom-layouts
        return "turbo_rails/frame" if turbo_frame_request?

        if devise_controller?
            # use custom layout for devise
            "no_navbar"
          else
            "application"
        end
    end
end
-3

我猜你正在覆盖导航。根据文档，你的代码应该是这样的

<%= turbo_frame_tag :my_frame do %>
  frame
  
  <%= link_to "About", about_path %>
<% end %>
-3

试一下：

在终端中执行命令yarn add @hotwired/turbo-rails

然后在app/javascript/application.js中添加代码import "@hotwired/turbo-rails"

最后使用bin/dev而不是rails s来运行Rails。

这对我有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接