Rails Turbo：点击时如何渲染部分？

Rails Turbo How do I render a partial when clicked?

提问人：Rq Bhatti 提问时间：10/23/2023 更新时间：10/24/2023 访问量：85

问：

我有一个 Ruby on Rails 应用程序，其弹出窗口当前设置为通过 Turbo Toggle 显示和隐藏。但是，我注意到这种方法会影响页面加载速度。

为了减少父页面的加载时间，我正在考虑仅在单击时呈现选项卡。

.div{ "data-controller": "toggle" } %div.{"data-action": "click->toggle#toggle touch->toggle#toggle"} = link_to 'Customers' = render "customers"

Ruby-on-Rails 渲染部分 热线 涡轮增 压刺激导轨

评论

0赞 zaphodbln_ 10/23/2023
你能分享一下你的刺激控制器吗？您必须在 toggle-method 中加载 customer-div （？）。或者，您可以使用像这样快速加载框架： turbo.hotwired.dev/handbook/frames#eager-loading-frames - 这将容易得多，并且应该使页面加载更快
0赞 Rq Bhatti 10/23/2023
让我解释一下。我有一个页面，点击时会显示多个弹出窗口（通过切换）。并且在弹出窗口下还有一些 ruby 代码。所以我只希望弹出窗口部分仅在用户单击切换链接时呈现/加载。
0赞 zaphodbln_ 10/24/2023
那么到目前为止，你的刺激控制器看起来如何呢？你已经尝试了什么？
0赞 Rq Bhatti 10/24/2023
刺激控制器工作正常。我试图通过涡轮延迟加载来解决问题，但仍然没有成功。turbo.hotwired.dev/reference/frames

答：

1赞 zaphodbln_ 10/24/2023 #1

好的，让我们试着弄清楚什么对你有帮助。基本上你有三个选择

  1. 急切加载帧以获得更好的性能
  2. 使用 Turbo-Frames 进行导航
  3. 使用 Stimulus（因为您已经在使用它）

无论哪种方式，您都必须提供一个单独的方法和一个视图来呈现 customers-part - 类似于 'customer/：id'

要使前两个选项正常工作，您必须确保客户布局（子布局）包含 turbo-frames 标签。使用 Rails，你可以：

<%= turbo_frame_tag(@customer) do %>
  <%= #all of your customer-stuff %>
<% end %>

呈现为

 <turbo-frame id="customer_1">all of your customer-stuff</turbo-frame>

对于第一个选项，帧的急切加载是这样完成的：

<%= turbo_frame_tag @customer, src: customer_path(@customer) %>

对于第二个，它只是

<%= turbo_frame_tag @customer %>

只需确保以与子布局中相同的方式创建 turbe-frame 标签，替换应该会自动发生。

对于第三个选项，您可以获取子页面 /customer/：id 并为自己替换 div。请看 https://stimulus.hotwired.dev/handbook/working-with-external-resources 的起始示例。

评论

0赞 Rq Bhatti 10/24/2023
感谢您的帮助，但我已通过 turbo 延迟加载成功实现了此问题。

上一个：Turbo 处理的 303 重定向不保持或滚动到位置定位点

下一个：Rails 7 Turbo Stream 渲染黑页