javascript - 选择选项上的选定属性不起作用(Ember.js + Handlebars)

Question

我正在使用 Ember 实现下拉菜单，但无法使用 Handlebars 表达式设置选项元素的选定属性。

这是一个ember-twiddle example这说明了问题。请注意，在旋转的 DOM 中，顶部示例中的 selected 属性并未出现。

<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" is a custom helper that returns true if "item.state === 2", which is does when the item is selected in the dropdown.

无论我在 Handlebars 中尝试什么，选定的属性都不会显示(例如selected={{if true "selected"}}也不起作用)。但是，将 selected 更改为 data-selected 完全符合预期。

有人知道这个问题吗？或者我是否误解了所选属性的工作原理？

Answer 1

所以这实际上是 dom/html 的一个“特性”。类和数据属性是属性，而selected是property。

有一个great write-up here (about this same issue!)

如果你想直接(我从另一个答案中偷了这个):.prop() vs .attr()