Как создать каталог магазина со строками и столбцами на index.html.erb в приложении rails

Question

У меня есть приложение магазина, и я хочу, чтобы элементы моего магазина отображались в каталоге из 3 столбцов.Я хочу, чтобы 4-й элемент автоматически перемещался в новую строку после размещения 3-го элемента в 3-м столбце первой строки.Все элементы будут вызываться из базы данных.

Как мне добиться отображения моего каталога товаров в виде миниатюр.На данный момент это то, что у меня есть в моем index.html.erb

<% @products.each do |product| %>
<table>
  <tr>
    <th>
<div class="entry">
  <div class="card-title" >
<%=h product.title %></div> <%= image_tag(product.image_url) %>

  <div class="price-line">
    <span class="price"><%= number_to_currency(product.price, :unit => "N", :format => "%u%n") %></span>
  </div>

  <% form_remote_tag :url => { :action => 'add_to_cart', :id => product } do %>
    <%= submit_tag "Add to Cart" , :class => "add_button" %>
    <% end %>

</div>

    </th>
</tr>
</table>
<% end %>

На данный момент каждый элемент отображается только в одном столбце, но я хочу отображать такие элементы:

Item A   Item B  Item C
Item D   Item E  Item F
Item G   ......  ......

Любая помощь будет оценена.Я новичок в RoR.

Спасибо.Ijespal

Answer 1

В Rails есть хороший помощник для этого: Array#in_groups_of

<table>
  <% @products.in_groups_of(3, false) do |row| %>
    <tr>
      <% row.each do |product| %>
        <td><%= product.name # and whatever else you want %></td>
      <% end %>
    </tr>
  <% end %>
</table>

Помощник in_groups_of обычно возвращает массив массивов, размер которых установлен первым параметром.Если исходное количество элементов не может полностью заполнить последний массив, то он дополняется значениями nil.Если вы передадите false в качестве второго аргумента, то последний массив останется короче остальных, без nil элементов.

Answer 2

Я не уверен, что это лучший способ, но вы можете использовать что-то вроде

<table>
   <% @products.each_with_index do |product, index| %>

      <% if index%3==0 %>
         <tr>
      <% end %>

      <td><%= product.name%></td>

      <% if (index+1)%3==0 %>
         </tr>
      <% end %>

    <% end %>
</table>

Работал здесь просто отлично (:

Редактировать

Это работает, но ответ Эджеруннера намного лучше! :]