1

使用 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上查看以“您也可以只自定义现有控件组件：”开头的 doco 部分，您似乎应该能够做到我想要的东西，但显示的示例没有解决 value 属性的使用，我不知道如何 .

4

2 回答 2

2

您不需要像这样呈现 HTML。如果您想访问选中的收音机，只需它是属性名称点值，如radio.value.

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

  actions: {
    onSubmit() {
      alert(this.radio.value)
    }
  }
于 2019-05-25T01:12:09.773 回答
1

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

在我的实现中，我使用 Ember 变更集，我的属性被称为usageType. 我希望它足够清楚以适应您的需求。

我也在使用Ember Truth Helpers，这就是{{eq opt.value el.value}}部分内容。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}}
于 2019-09-23T14:36:16.940 回答