Выбранный атрибут в опции выбора не работает (Ember.js + Handlebars)

Question

Я реализую раскрывающийся список с использованием Ember, но не могу установить выбранное свойство элемента option с помощью выражения handlebars.

Вот пример ember-twiddle , в котором показана проблема,Обратите внимание, что в DOM тиддла выбранный атрибут не отображается в верхнем примере.

<select
    aria-disabled="{{disabled}}"
    aria-multiselectable="{{multiselect}}"
    disabled={{cannotOpen}}
    onchange={{action 'itemClicked' value='target.value'}}
>
    <option selected disabled value="">{{placeholder}}</option>

    {{#each items as |item|}}
        <option 
            value={{item.value}}
            selected={{if (is-item-selected item.state) "selected"}}
            disabled={{item.disabled}}
        >
            {{item.name}}
        </option>
    {{/each}}
</select>

"is-item-selected" - это пользовательский помощник, который возвращает true, если "item".состояние === 2 ", что происходит, когда элемент выбран в раскрывающемся списке.

Независимо от того, что я пытаюсь использовать на руле, выбранный атрибут не будет отображаться (например, selected ={{если true "selected"}} тоже не работает).Однако изменение selected на data-selected работает точно так же, как и предполагалось.

Кто-нибудь знает об этой проблеме?Или я неправильно понимаю, как должен работать выбранный атрибут?

Answer 1

Так что на самом деле это «особенность» dom / html.Классы и атрибуты данных являются атрибутами, в то время как selected является property.

Здесь есть отличная запись (об этой же проблеме!)

И если вы хотите пойти прямо (я украл это из другого ответа): .prop () vs .attr ()