Here is my template:
<table id="locationDataTable" class="large-data-table" cellspacing='0' border='0'>
<thead>
<tr>
<th>
{{view App.LocationDataTable type='kwh'}}
</th>
<th>
{{view App.LocationDataTable type='btu'}}
</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Here is my view JS:
App.LocationDataTable = Ember.View.extend({
tagName: 'span',
classNames: ['carrot'],
classNameBindings: ['direction', 'isActive:active'],
direction: 'down',
isActive: false,
click: function(){
// remove active class from all #locationDataTable span
this.set('isActive', true); // set active only on this one
var type = this.get('type');
this.get('controller').set('sortProperties', [type]);
if (this.get('direction') === 'up') {
this.set('direction', 'down');
this.get('controller').set('sortAscending', true);
} else {
this.set('direction', 'up');
this.get('controller').set('sortAscending', false);
}
}
});
I dont know if I am doing this in the best way... i tried using the action helper like {{action 'sortTable'}}
before and had a similar issue... i could have different view js for each element, but still, how will i remove the active class from all of them?
Let me know if I didn't explain myself well.