Instantly share code, notes, and snippets.

Embed
What would you like to do?
// {{ 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
}
});
{{ radio-button name='thing' value='one' groupValue=selection selectedAction='testAction' }} One
{{ radio-button name='thing' value='two' groupValue=selection }} Two
Currently selected: {{ selection }}
@kenkogi

This comment has been minimized.

kenkogi commented May 5, 2016

Thanks @vasilakisfil. This was very helpful in a project I'm working on.
I experienced an issue where the checked attribute was not correctly being bound to the checked function.
This resulted to the last radio button always being the one visually selected.
The changes here seem to fix it.

What do you think of the approach?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment