ruby-on-rails Turbo-Rails:如何在`application.html.erb`中添加Turbo Frame?

pxiryf3j  于 2023-04-08  发布在  Ruby
关注(0)|答案(1)|浏览(175)

我在命令行中运行了以下命令:

> rails new test-turbo
> rails g controller Home index

将以下路由添加到config/routes.rb

resources :home, only: [:index]

<%= yield %> Package 在turbo帧标记中的app/views/layouts/application.html.erb中:

<body>
    <%= turbo_frame_tag :foobar do %>
      <%= yield %>
    <% end %>
  </body>

app/views/home/index.html.erb中添加了一个链接:

<%= link_to "Link to this page", home_index_path %>

然后,当我点击该链接时,我得到一个turbo帧错误:

如果我将turbo帧标签移动到home/index页面,它可以正常工作:
app/views/home/index.html.erb

<%= turbo_frame_tag :foobar do %>
  <h1>Home#index</h1>
  <p>Find me in app/views/home/index.html.erb</p>
  <%= link_to "Link to this page", home_index_path %>
<% end %>

为什么这样做是可行的,但是把它放在app/views/layouts/application.html.erb中却不行呢?在一天结束的时候,它会生成相同的HTML,对吗?
如果有用的话,here's the GitHub repo。提交537c40a有错误,提交b42ca66工作正常。
更新:这里有一个显示a solution that works with two turbo frames, one that is persistent across pages的gif:

yfjy0ee7

yfjy0ee71#

在框架中导航时,application布局不会呈现。您可以从日志中看到:

Rendered home/index.html.erb within layouts/turbo_rails/frame (Duration: 0.1ms | Allocations: 38)

你看到的是inspector和<turbo-frame id="foobar">,当你点击链接时,当前页面的html不会被响应的html替换,这就是框架的全部意义。只有框架内的内容会被更新。你可以从网络选项卡看到实际的响应:

响应中没有turbo帧^
要渲染布局,您可以在控制器中显式设置它以覆盖turbo帧的布局:

layout "application"

仅供参考,布局中很少需要turbo帧,特别是一个包裹一切的元素。<body>元素已经像一个帧一样,而它下面的另一个帧并没有真正获得任何东西。

更新

也许有一个完整的控制器有点太多了。我会从一些简单的东西开始。最简单的方法是总是渲染application布局。跳过布局渲染只是一种优化,以加快速度,框架之外的任何东西都会被丢弃。
您可以向布局添加一些if..else

...
<body>
  <% unless request.headers["Turbo-Frame"] == "main_content" %>
    <%= turbo_frame_tag :side_bar do %>
      # TODO: sidebar
    <% end %>
  <% end %>

  <%= turbo_frame_tag :main_content do %>
    <%= yield %>
  <% end %>
</body>

相关问题