Recording values of radio buttons in ember

Question

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?

score 8 · Accepted Answer · answered May 14 '15 at 18:27

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}}

I had come across that repo but thought that must be an easier way to do it that I was missing. As a temporary fix, I did dropdowns. `{{view "selected"}}` is so easy, you'd think radio's would work. — sbatson5, May 14 '15 at 18:33
Yeah its just that at some point the Ember core team decided to draw the line at radio buttons and say yeah we wont give you them but we will give you input=text and selects and checkboxes haha. I would honestly say that this radio button approach as a component is the Ember way and hardly overkill — mistahenry, May 14 '15 at 18:34

Miguel Mota · Answer 2 · 2015-05-14T18:26:00.530

Both of your radio buttons have the same value which they shouldn't. They need to be bound to different properties but have different values. Here is a working example of a radio button component.

Ember.RadioButton = Ember.View.extend({
    tagName : 'input',
    type : 'radio',
    attributeBindings : ['name', 'type', 'value', 'checked:checked:'],
    click : function() {
        this.set('selection', this.$().val());
    },
    checked : function() {
        return this.get('value') === this.get('selection');   
    }.property()
});


App.ApplicationController = Ember.Controller.extend({
   deductible: 0
});

Yes {{view Ember.RadioButton selectionBinding="deductible" value=1 name="deductible"}}
No {{view Ember.RadioButton selectionBinding="deductible" value=0 name="deductible"}}

http://jsbin.com/gotubuhasu/1/edit

score 2 · Answer 3 · answered Apr 22 '17 at 19:06

component.hbs

<label>No</label>
{{input click=(action "clicky" false) type="radio" name="someAttr"}}

<label>Yes</label>
{{input click=(action "clicky" true) type="radio" name="someAttr"}}

component.js

actions: {
  clicky (value) {
    this.set("someAttr", value)
  }
}

Recording values of radio buttons in ember

3 Answers3

Linked