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

Question

Используя 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/, но не вижу, как это относится к этому делу.

---

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

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

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

Answer 1

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

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

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

Answer 2

У меня была точно такая же проблема, но я, наконец, решил ее. Вы должны использоватьform.elementв блочном режиме. Почему также необходимо написать действие для обновления значения? Понятия не имею!

В своей реализации я использую ревизии Ember, и мое свойство называется usageType. Я надеюсь, что это достаточно ясно, чтобы адаптироваться к вашим потребностям.

Я также использую Ember Truth Helpers, что{{eq opt.value el.value}}часть есть. Он устанавливаетchecked в истину, если входное значение equal к текущему выбранному значению.

# 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}}