css - 使用 String.split inline 在视图中设置 CSS 类

Question

在我的模型中，我有一个string名为god_type.

例子：

Ice,Fire

Ranged,Cannon

Fire,Ranged

我将使用 Isotope 根据它们的god_type.

我需要输出 HTML 看起来像：

<div class="item Fire Ranged">
</div>

这是我尝试过的：

#gods-list.isotope-container
  - for god in @gods
    .item class='#{god.god_type.split(",").each { |c| c }}'
      a href='#{god_path(god)}' class='god'
        img src='#{god.thumbnail.url(:thumb)}'
        h2= god.name

以及生成的 HTML：

<div class="item ["Fire", "Ranged"]">
    ...
</div>

我究竟做错了什么？

Answer 1

我建议：

.item class='#{god.god_type.gsub(/\,/, " ")}'

您还可以将其包装在方法中、装饰器中、直接在模型中，甚至是应用程序助手中。这是一个总体思路：

class God
  def god_type_classes
    god_type.gsub(/\,/, " ").downcase
  end
end

# your view

.item class='#{god.god_type_classes}'

注意到我.downcase在字符串上使用过。这只是为了解决标准 CSS 命名问题（应该是item fire ranged）。