记录废物中单选按钮的值 [英] Recording values of radio buttons in ember

问题描述

我对Ember是相当新的（使用版本0.2.3）。我有一个具有几个计算值的组件。他们从输入字段中收集这些计算值：

 导出默认Component.extend（{
 loanAmount：200000，
可扣除：0，
 debtInt：5，
 
 getLoanCosts：computed（'loanAmount'，'debtInt'，function（）{
 return（get（this，'debtInt '）/ 12）* get（this，'loanAmount'）; 
}）
  

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

但是，我需要一个单选按钮输入有两个值（是和否），这应该符合我的组件中的可扣除的值（即这笔贷款是否可以扣除？），但是如果我这样做： p>

 是{{input type =radioname =deductiblevalue = deductible}} 
否{{input type =radioname =deductiblevalue = deductible}} 
  

我无法为这两个输入设置值，就像我可以用直接的HTML一样。如果我设置value = 0和value = 1，它们不会在我的组件中更新。

解决方案

c code $ c可以在组件中更新， / div>

是的，所以Ember没有内置支持单选按钮。尝试制作自己的组件！而且，让自己的意思是无耻的从互联网窃取。

 从ember导入Ember; 
 
导出默认值Ember.Component.extend（{
 tagName：'input'，
 type：'radio'，
 attributeBindings：['type'，'htmlChecked ：check'，'value'，'name'，'disabled']，
 
 htmlChecked：function（）{
 return this.get（'value'）=== this.get （'checked'）; 
} .property（'value'，'checked'），
 
更改：function（）{
 this.set（'checked' .get（'value'））; 
}，
 
 _updateElementValue：function（）{
 Ember.run.next（this，function（）{
 this 。$（）。prop（'checked'，this.get（'htmlChecked'））; 
}）; 
} .observes（'htmlChecked'）
}）; 
  

在组件中，单选按钮仍然有值，但选择的绑定是传递的在检查的属性中：

 是{{radio-button value ='1'checked = choice}} 
否{ {radio-button value ='0'checked = choice}} 
  

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

这篇关于记录废物中单选按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！