嵌套Turbo Frame跳转同页面为何发起完整HTML请求？

点击嵌套在outer Turbo Frame内的inner Frame链接时，Turbo会在请求头中携带Turbo-Frame: inner标记，但当前控制器始终返回完整页面视图。虽然Turbo前端会自动提取inner Frame内容完成更新，但服务器端仍会输出全量HTML，这就是网络请求返回完整页面的核心原因。

修改控制器代码，根据Turbo请求头判断是否仅返回指定Frame的内容：

def landing_page
  @variable = params[:variable].present? ? params[:variable] : "hello"

  # 针对Turbo Frame请求返回局部内容
  if request.headers["Turbo-Frame"] == "inner"
    render turbo_frame: "inner"
  end
end

如果希望更灵活地管理视图，也可以拆分局部视图：

1. 创建app/views/landing_pages/_inner_frame.html.erb，内容为原inner Frame内的代码：

<div><%= @variable %></div>
<%= link_to "link to same landing page", landing_page_path(variable: "World") %>

2. 修改主视图引用局部：

<%= turbo_frame_tag "outer" do %>
  <div><%= @variable %></div>
  <%= turbo_frame_tag "inner" do %>
    <%= render "inner_frame" %>
  <% end %>
<% end %>

3. 控制器中调整渲染逻辑：

def landing_page
  @variable = params[:variable].present? ? params[:variable] : "hello"

  if request.headers["Turbo-Frame"] == "inner"
    render partial: "inner_frame", layout: false, formats: [:html]
  end
end

以上两种方案都不需要使用Turbo Streams，也无需改动Frame的嵌套结构，完全适配Wicked Wizard的使用场景。

内容的提问来源于stack exchange，提问作者APysnack