Changing CSS classes within Ember and SortMixin - css

Question

I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?

Answer 1

Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.