当呈现多个部分时,多次调用Rails yield

时间:2018-03-04 20:22:05

标签: ruby-on-rails view render partial-views yield

我有多个部分正在渲染,这个想法是部分渲染成一行,并且有不同的内容。所以对于像这样的输出:

<div class="container">
  <div class="row" data-page='1'>
    <h1>Page 1 Title</h1>
  </div>
  <div class="row" data-page='2'>
    <h1>Page 2 Title</h1>
  </div>
  <div class="row" data-page='3'>
    <h1>Page 3 Title</h1>
  </div>
</div>

我正在编写这样的代码:

<div class="container">
  <% (1..3).each do |p| %>
    <div class="row" data-page="<%= p %>"> 
      <%= render "partials/o#{p}" %>
      <h1><%= yield :title %></h1>
    </div> 
  <% end %>
</div>

<!-- o1 partial -->
<% content_for :title do %>
   Page 1 Title
<% end %>

<!-- o2 partial -->
<% content_for :title do %>
   Page 2 Title
<% end %>

<!-- o3 partial -->
<% content_for :title do %>
   Page 3 Title
<% end %>    

上述代码的问题在于第2页和第3页,它也包含了前几页的内容。像这样:

<div class="container">
  <div class="row" data-page='1'>
    <h1>Page 1 Title</h1>
  </div>
  <div class="row" data-page='2'>
    <h1>Page 1 Title
      Page 2 Title</h1>
  </div>
  <div class="row" data-page='3'>
    <h1>Page 1 Title
      Page 2 Title
      Page 3 Title</h1>
  </div>
</div>

如何避免这种情况并返回所需的输出?

2 个答案:

答案 0 :(得分:0)

只需用flush提取替换你的部分:

<!-- o1 partial -->
<% content_for :title, flush: true do %>
   Page 1 Title
<% end %>

<!-- o2 partial -->
<% content_for :title, flush: true do %>
   Page 2 Title
<% end %>

<!-- o3 partial -->
<% content_for :title, flush: true do %>
   Page 3 Title
<% end %>

答案 1 :(得分:0)

你完全误解了captures helper的工作方式。

每个yield块基本上等待整个视图完成渲染,以确保已提供所有内容。您可以将每个命名的yield视为缓冲区。在您的情况下,即使您有多次调用,它们都指向:title缓冲区。

content_for在使用2+个参数(content_for(:foo, 'bar')调用时将内容写入缓冲区,或者在使用一个参数调用时输出缓冲区。请注意content_for按设计连接内容:

<%= yield :poem %>
<% content_for :poem, "Roses are red" %>
<% content_for :poem, " violets are blue" %>
# => "Roses are red violets are blue"

这可以通过使用flush: true选项进行更改,该选项可替换以前捕获的任何内容。

<%= yield :poem %>
<% content_for :poem, "This gets flushed..." %>
<% content_for :poem, "Roses are red violets are blue", flush: true %>
# => "Roses are red violets are blue"

您还可以使用直接进入yield block的provide

但是对于这种情况,我想知道你是不是只是在一个简单的局部变量可以用较少的hackyness来完成工作时不正确地使用它。