You can save the state of the selected item and create a computed property in your view component which compares if the view content is selected or not.
App.IndexController = Em.ArrayController.extend({
selected: null,
actions: {
productClick: function(title){
this.set('selected', title);
}
}
});
App.SelectButtonComponent = Em.Component.extend({
isSelected: Em.computed(function() {
return this.get('content') === this.get('selected');
}).property('content', 'selected'),
click: function() {
this.sendAction('action', this.get('content'));
}
});
<script type="text/x-handlebars" data-template-name="components/select-button">
{{#if isSelected}}
unselect me
{{else}}
select me
{{/if}}
</script>
{{select-button tagName='button' action="productClick"
content=item selected=selected}}