How do I successfully interpolate Ruby inside the CSS attribute of a HAML %li HTML tag?
css, erb, haml, interpolation, ruby-on-rails
Solution
<li <%= link[:name] == @topic ? "class='active'" : "" %>>
You don't need variable interpolation. This translates rather easily into HAML as either of the following:
%li{:class => (link[:name] == @topic) && "active"}
%li{:class => (link[:name] == @topic) ? "active" : "" }
The first is preferred in cases where you are including or omitting the value altogether. From the HAML docs:
If a single value is specified and it evaluates to false it is ignored; otherwise it gets converted to a string. For example:
.item{:class => @item.is_empty? && "empty"}
Problem
Long time listener, first time caller. I'm a 6 month old dev from Code Academy here in Chicago, and I've been stuck on this problem for a few hours. Beforehand, I appreciate all of your assistance and time. I'm converting an ERB template to HAML. The ERB is: ``` <ul class="nav nav-list"> <li class="nav-header"> <%= navigation_header %> </li> <% @navigation_links.each do |link| %> <% if link[:name].present? %> <li <%= link[:name] == @topic ? "class='active'" : "" %>> <%= link_to link[:name], link[:url] %> </li> <% else %> <hr /> <% end %> <% end %> </ul> ``` The ERB line I'm having trouble with is: ``` <li <%= link[:name] == @topic ? "class='active'" : "" %>> ``` I've tested many variations, read as much of the HAML reference as possible, concentrating on this section: You can also use #{} interpolation to insert complicated expressions in a HTML-style attribute: ``` %span(class="widget_#{@widget.number}") ``` ...and searched Google & StackOverflow, but I cannot get the output correct; HAML keeps disregarding the inline CSS. After all my groundwork, I was so confident in this version, but it didn't work: ``` - @navigation_links.each do |link| - if link[:name].present? %li{ :class => "#{ link[:name] == @topic ? "active" : ""}" } = link_to link[:name], link[:url] - else %hr ``` I've also tried an :erb filter, to no avail: ``` %ul.nav.nav-list %li.nav-header = navigation_header - @navigation_links.each do |link| - if link[:name].present? :erb <li <%= link[:name] == @topic ? "class='active'" : "" %>> = link_to link[:name], link[:url] - else %hr ``` And I've also tried a :css filter, but that failed. Any ideas what could be wrong? This is my first question on StackOverflow, so if I omitted some helpful info or broke any rules, please let me know.