Rails - изменение HTML на основе количества остатков записей 3

Question

Я пишу основное приложение Rails для отслеживания домашней работы (в основном это интерфейс базы данных). Я использую grid-систему из рамки Materialize CSS (так же, как Bootstrap, 12 столбцов). Когда я собираю записи из базы данных (куски домашней работы), я хочу их отобразить, чтобы попытаться разделить каждую строку на 3 divs из 4 столбцов, если в последней строке есть только две записи, тогда она должна разделить их на две divs из 6 столбцов, и если в последней строке есть только одна запись, тогда она должна показывать ее как один div из 12 столбцов.

Вот моя попытка:

<% count = 1 %> 
<% @homeworks.each do |homework| %> 
    <% if @homeworks.length - count > 0 then %> 
    <div class="col s12 m4"> 
    <% count = count + 1 %> 
    <% elsif @homeworks.length - count == 1 then %> 
    <div class="col s12 m6"> 
    <% else %> 
    <div class="col s12 m12"> 
    <% end %> 
    <a href="<%= homework_path(homework) %>"> 
     <div class="card-panel hoverable"> 
     <center><h5 class="cutoff"><%= homework.title %></h5></center><br> 
     <%= truncate(homework.content, :length => 17, :separator => ' ') %> 
     </div> 
    </a> 
    </div> 
<% end %> 

Это работало отлично 5 записей:

Однако, с 6 записей я получаю этот результат:

Может ли кто-нибудь указать мне правильное направление? Спасибо.

Answer 1

Я не совсем понимаю вашу логику с переменной count, но это не так, как я подошел бы к проблеме независимо от того, что есть намного проще и чище: используйте Enumberable#each_slice.

Ваш код будет выглядеть примерно вдоль линий:

<% @homeworks.each_slice(3) do |homeworks_row| %> 
    <% if homeworks_row.length == 3 %> 
    <% width_class = "m4" %> 
    <% elsif homeworks_row.length == 2 %> 
    <% width_class = "m6" %> 
    <% else %> 
    <% width_class = "m12" %> 
    <% end %> 

    <% homeworks_row.each do |homework| %> 
    <div class="col s12 <%= width_class %>"> 
     <a href="<%= homework_path(homework) %>"> 
     <div class="card-panel hoverable"> 
      <center><h5 class="cutoff"><%= homework.title %></h5></center><br> 
      <%= truncate(homework.content, :length => 17, :separator => ' ') %> 
     </div> 
     </a> 
    </div> 
    <% end %> 
<% end %> 

Каждый homeworks_row будет содержать либо 1, 2 или 3 homework S - означает, что вы можете просто выбрать ширину столбца, на основе длины строки ,

Вы также можете улучшить этот код, обернув что if заявление в вспомогательный метод, т.е. ваш шаблон будет включать в себя строку:

<div class="col s12 <%= width_class(homework_row.length) %>"> 

... но я оставлю это здесь как один блок кода для простоты.