时间戳

首页 > 解决方案 > ember-bootstrap - 渲染“无线电”输入

ember.js - ember-bootstrap - 渲染“无线电”输入

问题描述

使用 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 属性的使用，我不知道如何 .

标签： ember.jstwitter-bootstrap-3ember-bootstrap

解决方案

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

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

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

推荐阅读