radio-button-component.js

// {{ radio-button name='dish' value='spam' groupValue=selectedDish selectedAction='testAction' }} Spam
// {{ radio-button name='dish' value='eggs' groupValue=selectedDish }} Eggs
//
/*
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: [ 'checked', 'name', 'type', 'value' ],
 
  checked: function () {
    if (this.get('value') === this.get('groupValue')) {
      Ember.run.once(this, 'takeAction'); //this actually fires 3 times :/
      return true;
    } else { return false; }
  }.observes('groupValue'),

  takeAction: function() {
    this.sendAction('selectedAction', this.get('value'));
  },
 
  change: function () {
    this.set('groupValue', this.get('value'));
  }
});
*/


import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: [ 'checked', 'name', 'type', 'value' ],
 
  checked: function () {
    if (this.get('value') === this.get('groupValue')) {
      Ember.run.once(this, 'takeAction');
      return true;
    } else { return false; }
  },

  takeAction: function() {
    this.sendAction('selectedAction', this.get('value'));
  },
 
  change: function () {
    this.set('groupValue', this.get('value'));
    Ember.run.once(this, 'checked'); //manual observer
  }
});

templates-application.hbs

{{ radio-button name='thing' value='one' groupValue=selection  selectedAction='testAction' }} One
{{ radio-button name='thing' value='two' groupValue=selection }} Two
Currently selected: {{ selection }}