I am fairly new to Ember (using version 0.2.3). I have a component with a few computed values. They gather these computed values from input fields:
export default Component.extend({
loanAmount : 200000,
deductible : 0,
debtInt : 5,
getLoanCosts: computed('loanAmount', 'debtInt', function(){
return (get(this, 'debtInt')/12) * get(this, 'loanAmount');
})
On my template.hbs, I have an input field {{ input value=loanAmount }}
and I can call {{getLoanCosts}}
in my template.hbs, to show the computed cost. This works great for text/number inputs.
However, I need to have a radio button input with two values (Yes and No). This should line up with the deductible
value in my component (i.e. is this loan deductible?). However, if I do:
Yes {{ input type="radio" name="deductible" value=deductible }}
No {{ input type="radio" name="deductible" value=deductible }}
I can't set values for these two inputs, like I can with straight HTML. If I set value=0 and value=1, they never update in my component. How can I update my deductible
in the component based on whether Yes or No is selected?
Yeah so Ember doesn't have built in support for a radio button. Try making your own component! And by make your own I mean shameless steal one from the internet.
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'input',
type: 'radio',
attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name', 'disabled'],
htmlChecked: function() {
return this.get('value') === this.get('checked');
}.property('value', 'checked'),
change: function() {
this.set('checked', this.get('value'));
},
_updateElementValue: function() {
Ember.run.next(this, function() {
this.$().prop('checked', this.get('htmlChecked'));
});
}.observes('htmlChecked')
});
And in component, the radio buttons still have values, but the binding of the selection is to the passed in checked property:
Yes{{radio-button value='1' checked=choice}}
No{{radio-button value='0' checked=choice}}