ember-bootstrap - рендеринг "радио" входов - PullRequest
Новая
       36

ember-bootstrap - рендеринг "радио" входов

1 голос
/ 24 мая 2019

Используя Ember addon 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 / # / компоненты / формы .

Однако я не могу предоставить пользовательское значение для каждой радиокнопки, чтобы в итоге я получилрендеринг HTML выглядит следующим образом: 

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

Я посмотрел «Пользовательские элементы управления» на https://www.ember -bootstrap.com / # / компоненты / формы , но я не вижу, как этоотносится к этому случаю.

РЕДАКТИРОВАТЬ : просто чтобы прояснить, почему я хочу это сделать, я хочу отобразить читаемую метку (например, «Цитрусовые»), но не-читаемое значение ("C"), доступное для отправки обратно на сервер (потому что сервер мыслит в терминах "C" или "N".

Это не обязательно, я мог бы отправить "Citrus" обратно и отобразить егона сервере, но я просто подумал, что это будет очень просто.

Глядя на часть документа, начиная с«Вы также можете просто настроить существующий элемент управления:» на https://www.ember -bootstrap.com / # / компоненты / формы кажется, что вы должны быть в состоянии сделать то, что я послено показанный пример не касается использования атрибута значения, и я не могу понять, как это сделать.

1 Ответ

2 голосов
/ 25 мая 2019

Вам не нужно, чтобы HTML отображался таким образом. если вы хотите получить доступ к проверенному радио, просто это точка имени свойства, например radio.value.

Вот как это сделать в действии при отправке: 

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