Rails - 根据记录数余数更改HTML 3

Question

我正在编写一个基本的 Rails 应用程序来跟踪家庭作业（基本上只是一个数据库接口）。我正在使用 Materialize CSS 框架中的网格系统（与 Bootstrap 相同，12 列）。当我从数据库中收集记录（作业）时，我想显示它们，以便它会尝试将每一行拆分为 3 divs，每行 4 列，如果最后一行只有两条记录，那么它应该将它们分成两个 div 的 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 - 这意味着您可以根据行的长度简单地选择列宽。

您可能还想通过将 if 语句包装到辅助方法中来改进此代码，即您的模板将包含以下行：

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

...但为了简单起见，我将把它留在这里作为一个代码块。

Rails - 根据记录数余数更改HTML 3

Rails - Change HTML based on number of records remainder 3

html

css

ruby

ruby-on-rails

materialize