Rails Turbo 如何在单击时渲染部分内容？

Question

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

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

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

Answer 1

好的，让我们尝试找出什么对您有帮助。基本上你有三个选择

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

无论哪种方式，您都必须提供一个单独的方法和一个视图来呈现客户部分 - 类似于“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 %>

只需确保以与子布局中相同的方式创建涡轮框架标签，替换就会自动发生。

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