Using String.split inline to set CSS classes in the view

Question

In my model I have a field type string called god_type.

Example:

Ice,Fire

Ranged,Cannon

Fire,Ranged

I'm going to be using Isotope to filter these models based on their god_type.

I need the output HTML to look like:

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

Here's what I've tried:

#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

And the resulting HTML:

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

What am I doing wrong?

@Damien: Your second comment worked, please submit it as an answer. — sergserg, Aug 29 '13 at 02:51

Damien Roche · Accepted Answer · 2013-08-29T03:21:33.297

I'd suggest:

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

You could also wrap it in a method, within a decorator, or directly in the model, or even an application helper. Here's a general idea:

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

# your view

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

Noticed I've used .downcase on the string. This is just to address standard CSS naming (should be item fire ranged).

Using String.split inline to set CSS classes in the view

1 Answers1