Рендеринг <option>внутри цикла #each

Question

Я хочу динамически создавать <option> элементы внутри тега <select>, используя следующий компонент (на основе принятого ответа на этот вопрос ):

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  computedOptions: computed('optionsList.@each', function() {
    var that = this;
    return this.get('optionsList').map(function(option) {
      let optionIsSelected = option.text === that.selectedElement;
      let builtOption = {
        'option': option,
        'isSelected': optionIsSelected
      };

      return builtOption;
    });
  })
});

Переменные optionsList и selectedElement передаются другим компонентом этому.

В моем шаблоне, когда я использую блок #each, например:

<select name="{{name}}" id="{{name}}">
    {{#each computedOptions as |option|}}
        <option></option>
    {{/each}}
</select>

В консоли моего браузера появляется следующая ошибка:

Error: unreachable (с помощью следующего стека вызовов, если это поможет: https://pastebin.com/PkrcAFCr)

Я не уверен, что означает эта ошибка, и я не знаю, почему эта ошибка происходит.

Единственный способ, которым мне удалось сделать эту работу (несколько), это наличие этого шаблона:

<select name="{{name}}" id="{{name}}">
    {{#each computedOptions}}
        <option value="{{option.value}}" selected={{option.isSelected}}>{{option.text}}</option>
    {{/each}}
</select>

При удалении as |option| и использовании свойств моего параметра параметры отображаются без ошибок (в моем случае - 3 варианта), но сами параметры пусты (<option></option>) в результирующем HTML, поэтому текст для каждого параметра не отображается, когда Я нажимаю на кнопку выбора на моей странице.

Значит ли это, что невозможно динамически заполнить тег <select> в Ember.js? Если это возможно, как правильно это сделать?

Answer 1

Идея as |something| состоит в том, что вы можете использовать нужное имя переменной.

Эта проблема: https://github.com/emberjs/ember.js/issues/16826 показывает нам, что существует некоторый конфликт, когда ваше имя переменной является существующим тегом (опция, p и т. Д.), Поэтому вам просто нужно сделать что-то вроде:

<select name="{{name}}" id="{{name}}">
  {{#each computedOptions as |opt|}}
    <option value="{{opt.value}}" selected={{opt.isSelected}}>{{opt.text}}</option>
  {{/each}}
</select>