Recording values of radio buttons in ember

问题

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?

回答1:

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/30244040/recording-values-of-radio-buttons-in-ember

标签

javascript

ember.js

handlebars.js

htmlbars