Rails中的嵌套布局

Question

我无法找到执行以下操作的方法:

让我们在我的application.html.erb中说我有以下内容

<div id="one" >
    <%= yield %>
</div>

然后我想要另一个布局文件asdf.html.erb

<div id="two">
    <%= yield %>
</div>

我想要最终输出

<div id="one>
   <div id="two">
      <%= yield %>
   </div>
</div>

可能吗？谢谢.

Answer 1

到目前为止我找到的最干净的解决方案来自这个回购:https://github.com/rwz/nestive

我不想要整个宝石.如果你像我一样,这就是我实现我想要的方式:

# application_helper.rb

  # From https://github.com/rwz/nestive/blob/master/lib/nestive/layout_helper.rb
  def extends(layout, &block)
    # Make sure it's a string
    layout = layout.to_s

    # If there's no directory component, presume a plain layout name
    layout = "layouts/#{layout}" unless layout.include?('/')

    # Capture the content to be placed inside the extended layout
    @view_flow.get(:layout).replace capture(&block)

    render file: layout
  end

然后你保持/layouts/application.html.erb不变!

您可以创建其他布局.在我的情况/layouts/public.html.erb和/layouts/devise.html.erb:

# public.html.erb
<%= extends :application do %>
  <%= render 'partials/navbar' %>
  <div class="container margin-top">
    <%= yield %>
  </div>
<% end %>

# devise.html.erb
<%= extends :public do %>
  <div class="col-sm-6 col-sm-offset-3">
    <%= yield %>
  </div>
<% end %>

奇迹般有效!我还在微笑,我终于找到了一个干净的解决方案.

Answer 2

默认情况下,application.html.erb是您的布局.您可以通过从应用程序布局中将其调用为部分来呈现默认子布局:

# app/views/layouts/application.html.erb
<div id="one" >
    <%= render "layouts/asdf" %>
</div>

# app/views/layouts/_asdf.html.erb
<div id="two">
    <%= yield %>
</div>

这将输出以下内容:

<div id="one>
   <div id="two">
      <%= yield %>
   </div>
</div>

或者,如果您希望在逐个控制器的基础上有条件地渲染布局,则应考虑使用嵌套布局.从文档:

在NewsController生成的页面上,您想隐藏顶部菜单并添加右侧菜单:

# app/views/layouts/news.html.erb
<% content_for :stylesheets do %>
  #top_menu {display: none}
  #right_menu {float: right; background-color: yellow; color: black}
<% end %>
<% content_for :content do %>
  <div id="right_menu">Right menu items here</div>
  <%= content_for?(:news_content) ? yield(:news_content) : yield %>
<% end %>
<%= render template: "layouts/application" %>

新闻视图将使用新布局,隐藏顶部菜单并在"内容"div中添加新的右侧菜单.