在ember中记录单选按钮的值

Question

我是Ember的新手(使用版本0.2.3).我有一个具有一些计算值的组件.他们从输入字段收集这些计算值:

export default Component.extend({
  loanAmount : 200000,
  deductible : 0,
  debtInt : 5,

  getLoanCosts: computed('loanAmount', 'debtInt', function(){
    return (get(this, 'debtInt')/12) * get(this, 'loanAmount');
  })

在我的template.hbs上,我有一个输入字段{{ input value=loanAmount }},我可以{{getLoanCosts}}在我的template.hbs中调用,以显示计算的成本.这适用于文本/数字输入.

但是,我需要一个带有两个值的单选按钮输入(是和否).这应该与deductible我的组件中的值对齐(即这笔贷款可以扣除吗？).但是,如果我这样做:

Yes {{ input type="radio" name="deductible" value=deductible }}
No {{ input type="radio" name="deductible" value=deductible }}

我无法为这两个输入设置值,就像我可以使用直接HTML一样.如果我设置value = 0和value = 1,它们永远不会在我的组件中更新.如何deductible根据是或否选择更新我的组件？

Answer 1

是的,所以Ember没有内置支持单选按钮.尝试制作自己的组件!通过自己制作我的意思是无耻地从互联网上窃取一个.

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

在组件中,单选按钮仍然具有值,但选择的绑定是传入的已检查属性:

Yes{{radio-button value='1' checked=choice}}
No{{radio-button value='0' checked=choice}}