嵌套布局未正确呈现答案

【问题标题】：Nested Layout not rendering properly嵌套布局未正确呈现
【发布时间】：2015-10-14 11:53:42
【问题描述】：

我有一个application.html.erb，有这个：

<!-- Truncated for Brevity -->
<body>
   <%= content_for?(:content) ? yield(:content) : yield %>
</body>

那我还有一个布局family_tree.html.erb

看起来像这样：

<%= render template: "layouts/application" %>

<main id="view">

  <title>Timeline!</title>

  <%= render partial: "tree_header" %>

  <% content_for :content do %>
    <%= yield %>
  <% end %>

</main>

那部分_tree_header.html.erb 看起来像这样：

<header class="profile-header">

  <div class="wrapper">

    <div class="profile-author">
      <h2 class="center author-name">Martha Doe <a class="author-description-btn" href=""><i class="icon-list-2"></i></a></h2>
      <h4 class="author-title">Aunt <i class="author-title-circ"></i><i class="author-title-circ"></i><i class="author-title-circ"></i></h4>
      <!-- <div class="author-description">
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p>
      </div> -->
    </div>

    <nav class="profile-nav center">
      <ul>
        <li><%= link_to "Timeline", timeline_path %></li>
        <li class="active"><a href="#">Family Tree</a></li>
      </ul>
    </nav>
  </div>
</header>

这就是我希望它呈现的方式（这是静态 HTML）：

但这就是它的渲染方式：

请注意，即使我在 content_for 块中的 yield 语句之前指定了 render partial: "tree_header"，它似乎仍然在我的 layouts/family_tree.html.erb 中的 yield 之后呈现。

我该如何解决这个问题？

编辑 1

使用 amihule 的答案，我或多或少地解决了它，但现在我看到顶部和 tree_header 部分之间有一个空格。这个content_for 块会导致这个空间吗？

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4

【解决方案1】：

TL;DR：将 <%= render template: "layouts/application" %> 移动到子布局的底部，并将其他所有内容包含在 content_for 块中。

<% content_for :content do %>
  <main id="view">
    <title>Timeline!</title>
    <%= render partial: "tree_header" %>
    <%= yield %>
  </main>
<% end %>
<%= render template: "layouts/application" %>

您想先为:content 填写内容，然后渲染模板以包含此内容。您设置模板的方式，您会在 rails 控制台上注意到它在您的部分之前呈现 layouts/application，如下所示：

Rendered test/foo.html.erb within layouts/family_tree
Rendered layouts/application.html.erb
Rendered test/_tree_header.html.erb

见Using Nested Layouts。

【讨论】：

太棒了。这几乎完全解决了它，我现在看到我的应用程序顶部 (navbar) 和 tree_header 之间有一个空格。 content_for 会导致这种情况吗？我更新了这个问题，提供了更多关于我所看到的内容和屏幕截图的详细信息。
这很难从屏幕截图中看出，我建议您将 HTML 输出与静态 HTML 进行比较并寻找差异。在我构建的测试中，部分内容和生成的内容之间没有额外的空格或其他任何内容。

【解决方案2】：

TL;DR

amiuhle 的回答：将 content_for :content do 放在 family_tree.html.erb 文件的顶部。

说明

您的代码按顺序执行。让我们看看会发生什么

your_controller.rb

class YourController < ApplicationController

  def show
    ...
    render layout: "family_tree"
  end

action会首先调用family_tree.html.erb布局，其第一行是

<%= render template: "layouts/application" %>

所以它会直接调用主application.html.erb

<!-- Truncated for Brevity -->
<body>
   <%= content_for?(:content) ? yield(:content) : yield %>
</body>

此时，还没有定义content_for(:content)，所以它只会正常显示！然后它从 family_tree 中跳转的地方恢复。

<main id="view">

  <title>Timeline!</title>

  <%= render partial: "tree_header" %>

  <!-- The below piece of code is absolutely useless as it is not used afterwards -->
  <% content_for :content do %>
    <%= yield %>
  <% end %>

</main>

正如@amiuhle 解释的那样，这是因为您在检查后设置了 content_for(:content) 。解决方案是将content_for :content do 放在family_tree.html.erb 文件的顶部。

【讨论】：