Question

使用Ember插件ember-bootstrap，我可以制作一组单选按钮，如下所示：

{{form.element controlType="radio" label="Fruit Type" property="radio" options=radioOptions optionLabelPath="label"}}

使用如下所示的控制器：

export default Controller.extend({

  init() {
    this._super(...arguments);
    this.radioOptions = [
      {
        label: 'Citrus',
        value: 'C',
        inline: true
      },
      {
        label: 'Non-Citrus',
        value: 'N',
        inline: true
      }
    ];
  }

});

相关文档在这里https://www.ember-bootstrap.com/#/components/forms。

但是我不能为每个单选按钮提供一个自定义值，这样我最终得到的是这样呈现的HTML：

  <label>Citrus</label>  
  <input type="radio" value="C">
  <label>Non-Citrus</label>  
  <input type="radio" value="N">

我已经查看了https://www.ember-bootstrap.com/#/components/forms上的“自定义控件”，但看不到这种情况如何应用。

编辑：只是为了更清楚我为什么要这样做，我想显示可读标签（例如“ Citrus”），但具有不可读值（“ C”）可用于发送回服务器（因为服务器认为是“ C”或“ N”。

我可以将“ Citrus”发回并在服务器上映射它不是必需的，但我只是认为这非常简单。

在https://www.ember-bootstrap.com/#/components/forms上以“您也可以只自定义现有控制组件：”开头的内容为例，看来您应该能够完成我所追求的事情，但是显示的示例未解决使用value属性的问题，而且我不知道该怎么做。

Answer 1

您不需要像这样呈现HTML。如果要访问选中的单选，则只需输入属性名称点值，例如radio.value。

在提交操作中如何获取它：

  actions: {
    onSubmit() {
      alert(this.radio.value)
    }
  }

Answer 2

我遇到了完全相同的问题，但终于解决了。您必须在块模式下使用form.element。为什么还需要编写一个动作来更新值？我不知道！

在我的实现中，我使用的是Ember变更集，我的属性称为usageType。我希望它足够清晰，可以满足您的需求。

我也在使用{{eq opt.value el.value}}部分，就是Ember Truth Helpers。如果输入值是当前选定值的checked平均值，它将eq设置为true。

# my-component.js

actions: {
  selectUsageType(option) {
      return this.set('changeset.usageType', option);
    }
}

# usage-type-options.js (imported in component JS)

[{
  label: 'First label',
  value: 'A'
},
{
  label: 'Second label',
  value: 'B'
}]

# Etc.

# my-component.hbs

# I'm not using angle-bracket invovation here, oops

{{#form.element
  property="usageType"
  label="My label" as |el|
}}
  {{#each usageTypeOptions as |opt|}}
    <div class="form-check">
      <input
        type="radio"
        class="form-check-input"
        id="{{el.id}}-{{opt.value}}"
        checked={{eq opt.value el.value}}
        onchange={{action "selectUsageType" opt.value}}
      >
      <label for="{{el.id}}-{{opt.value}}" class="form-check-label">
        {{opt.label}}
      </label>
    </div>
  {{/each}}
{{/form.element}}

ember-bootstrap-呈现“无线电”输入

2 个答案: