ruby-on-rails - 每 3 项新行

Question

我想一次呈现我的项目列表 3，以便它们以三行输出。我正在使用

<div class="row">
  <div class="three columns">
 <% @items.each do |f|%>
   <div class="item">
     <%= f.content %>
       </div>
     <% end %>
  </div>
</div>

它在一个“行”中输出所有规则 -

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

我想要做的是为每三个返回的项目输出一行，所以 -

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>
<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

谢谢

Answer 1

除了前面提到的each_slice，Rails 还有一个in_groups_of方法可以像这样使用：

<% @items.in_groups_of(3, false).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

几乎相同each_slice，除了需要输出空白 div 的场景变得更清晰，如下所示：

<% @items.in_groups_of(3).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content if item %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

in_groups_of默认情况下填充最后一组中缺少的项目nil，因此它将进行最后几次迭代，并且检查if item将确保它不会通过调用content.nil

in_groups是另一种用于视图格式化的有趣方法。

Answer 2

您可以使用each_slice方法：

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

附加说明：如果您希望最后一行有 3 个 div，即使最后一行仅包含 2 个项目，该怎么办？（即这@items是一个包含 5 个项目的列表，最后一行应该只输出 2 个 div）。

解决方案：

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
      <% (3 - array_of_3_items.length).times.each do |fake_div| %>
        <div class="item empty">
        </div>
      <% end %>
    </div>
  </div>
<% end %>