Rails drivers index页面如何根据订阅类型为条目添加对应CSS类

你遇到的问题核心来自两个错误逻辑：

• 你在控制器遍历@drivers时将订阅类型赋值给了全局实例变量@sub_type，每次遍历都会覆盖该变量的值，遍历结束后@sub_type只会保留当前页最后一个driver的订阅类型，导致视图渲染所有卡片时都绑定了同一个最终值，才会出现整页类型一致的问题。
• 你在控制器单独遍历判断订阅类型的逻辑会产生N+1查询问题，也容易出现数据遗漏。

第一步：将订阅类型逻辑整合到主查询，避免N+1同时预加载数据 #

首先修改控制器index方法的主查询，通过left join关联订阅表，将订阅类型作为自定义字段映射到driver对象中，再和原有的profiles联表逻辑合并：

# drivers_controller.rb
def index
  # 联表查询同时计算score、拼接订阅类型字段
  base_query = Driver.left_joins(:profile, :subscriptions)
                     .select("drivers.*, profiles.score, 
                       CASE
                         WHEN subscriptions.status = 'active' AND subscriptions.level = 'gold' THEN 'gold'
                         WHEN subscriptions.status = 'active' AND subscriptions.level = 'silver' THEN 'silver'
                         ELSE 'free'
                       END AS sub_type")
                     .order("profiles.score DESC")
  # 传入基础查询给pagy分页
  @pagy, @drivers = pagy(base_query, items: 16)
end

注意将上面subscriptions关联的字段名、状态判断条件替换为你项目中实际的字段定义。

第二步：修改视图绑定逻辑，使用每个driver自身的sub_type字段 #

不要使用全局的@sub_type变量，直接取每个driver对象自带的sub_type属性：

<!-- 视图遍历部分 -->
<% @drivers.each do |driver| %>
  <div class="card <%= driver.sub_type %>">
    <!-- 卡片其他内容 -->
  </div>
<% end %>

修改完成后重启服务测试：32条测试数据会正常分布在两页中，gold和silver对应的卡片会自动绑定对应CSS类，不会再出现整页类型一致的问题。

内容的提问来源于stack exchange，提问作者devon93