在 ember 中记录单选按钮的值答案

【问题标题】：Recording values of radio buttons in ember在 ember 中记录单选按钮的值
【发布时间】：2023-03-27 11:52:01
【问题描述】：

我对 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 }}，我可以在我的 template.hbs 中调用 {{getLoanCosts}} 来显示计算的成本。这非常适合文本/数字输入。

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

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

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

【问题讨论】：

标签： javascript ember.js handlebars.js htmlbars

【解决方案1】：

您的两个单选按钮具有相同的值，但它们不应该具有相同的值。它们需要绑定到不同的属性，但具有不同的值。这是一个单选按钮组件的工作示例。

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

【讨论】：

【解决方案2】：

是的，所以 Ember 没有内置对单选按钮的支持。尝试制作自己的组件！自己做我的意思是不要脸地从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')
});

并且在组件中，单选按钮仍然有值，但是选择的绑定是到传入的checked属性：

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

【讨论】：

我遇到了那个 repo，但我认为这一定是一种更简单的方法，因为我错过了。作为临时修复，我做了下拉菜单。 {{view "selected"}} 很简单，你会认为收音机会起作用。
是的，Ember 核心团队在某个时候决定在单选按钮上划清界限，说是的，我们不会给你它们，但我们会给你输入=文本，选择和复选框哈哈。老实说，这种作为组件的单选按钮方法是 Ember 的方式，几乎没有矫枉过正

【解决方案3】：

组件.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)
  }
}

【讨论】：