ruby-on-rails - HAML + Bootstrap div.row 和 div.spanX，每 N 个元素新行

Question

我找到了这个问题，它的答案正是我试图开始的。但是，它不会产生预期的结果。

给定数组@items，我想为每 3 个项目创建一个新行。这是目前我的标记：

- @items.each_with_index do |item, index|
  - if index % 3 == 0
    %div.row-fluid
  %div.span4
    %div.item-container
      use item

这导致 html 像这样呈现

<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div> 
<div class="span4">...</div>
<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div> 
<div class="span4">...</div>

当然，我想要的是：

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div> 
    <div class="span4">...</div>
</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div> 
    <div class="span4">...</div>
</div>

我在哪里错了？

Answer 1

使用Array#in_groups_of划分集合，然后对其进行迭代：

- @items = (1..20).to_a
- @items.in_groups_of(3, false).each_with_index do |group, index|
  .row-fluid
    - group.each do |item|
      .span4= "group: #{index}; item: #{item}"

提示：您可以省略标签定义并将其默认为%div. %div.span4变得公正.span4等等。