title: How to conditionally apply CSS classes in Ember?
body: <p>I created a resource in my Ember app and I'm using an <code>ArrayController</code> to display a table with the data. I had no problem making the table sortable using <code>ArrayController</code>'s <code>sortProperties</code> and <code>sortAscending</code> properties.</p>
  
  <p>Now based on the value of these two properties I need to conditionally apply CSS styles to the table's column headers, but because of the Handlebars limited logic, I need to create a boolean property (<code>sortByName</code>, <code>sortByValue2</code>, <code>sortByValue2</code>) on the controller for each column and use the following code to apply the correct class to the each column header:</p>
  
  <pre><code>{{#if sortByName}}
      &lt;th {{action "setSortBy" "name"}} {{bind-attr class="sortAscending:sorting_asc:sorting_desc"}}&gt;Name&lt;/th&gt;
  {{else}}
      &lt;th {{action "setSortBy" "name"}} class="sorting"&gt;Name&lt;/th&gt;
  {{/if}}
  </code></pre>
  
  <p>Imagine the above repeated 10 times and you get the idea of what I'm dealing with. This code is very verbose and not DRY at all.
  What's the best way to solve this problem? </p>
  
  <p>Ideally I would like to use an expression, which takes a parameter inside of the template and returns a string with CSS class names like this:</p>
  
  <pre><code>&lt;th {{action "setSortBy" "name"}} {{bind-attr class="isSortedBy('name')"}}&gt;Name&lt;/th&gt;
  </code></pre>
  
  <p>Where <code>isSortedBy('name')</code> would return either <code>sorting_asc</code>, <code>sorting_desc</code> or nothing.</p>
  
  <p>Is this possible using standard Ember features? Will this be possible using HTMLBars? </p>
  
  <p>How would you solve a similar problem?</p>