Question

Ember guide on binding data attributes表示＆＃34;如果您使用带有布尔值的数据绑定，它将添加或删除指定的属性。＆＃34;我尝试使用此功能动态设置selected上的<option>属性。我发现我可以动态设置disabled属性，但selected属性总是被省略，不管布尔值是真还是假。

鉴于这个把手模板：

<option disabled={{false}} selected={{false}}>One</option>
<option disabled={{true}} selected={{true}}>Two</option>

我得到以下HTML：

<option>One</option>
<option disabled>Two</option>

为什么selected={{true}}在渲染输出中不会产生selected属性？

为了提供更多背景信息，请关注How to do a select in Ember 2.0上的这篇文章。使用该文章中描述的方法，当select onchange事件触发时，我可以成功更新控制器中的数据，但DOM不会更新以反映更改。

我已将this ember-twiddle放在一起，其中包含两个select元素。一个使用select={{bool}}，它没有按照我想要的方式工作。另一个使用长手{{#if bool}}...{{else}}...{{/if}}，它确实有效，但看起来很糟糕。

Answer 1

感谢所有花时间发表回答我的问题的人。 Sonny的评论指出了我正确的方向：

selected是属性，不是具有值
的属性

这对我来说是新闻，它让我陷入了一个发现的兔子洞。我发现this SO answer特别有用。

当我发布问题时，我并不了解属性和属性之间的区别。我希望看到DOM中出现selected属性，但这并不会发生。我现在明白正确设置了selected 属性，并且<option>标记没有出现在带selected的DOM中属性无关紧要。

此代码段有助于说明我为什么感到困惑。两个生成的<select>下拉菜单显示相同，最初选择了选项2。 selected属性在使用selected={{true}}设置时不会出现在DOM中，但在其他情况下确实出现在DOM中：

<select>
  <option>1</option>
  <option selected={{true}}>2</option>
</select>

<select>
  <option>1</option>
  <option selected>2</option>
</select>

此处the same snippet as a Twiddle

Answer 2

您可以使用帮助器将选项值与某个地方（如

）进行比较

<select onchange={{action "countryChanged" value="target.value"}}>
{{#each countries as |country|}}
    <option value={{country.id}} selected={{is-equal country model.address.country_code}}>{{country.name}}</option>
{{/each}}
</select>

在“帮助者”文件夹中（如果尚未创建，则创建）

创建你的帮助文件，如“is-equal.js”

import Ember from 'ember';

export default Ember.Helper.helper(function([lhs, rhs]) {
  return lhs === rhs;
});

只会比较2个值并返回一个布尔值，你也可以返回一个类名或任何你喜欢的。

该操作将用户选择的值设置为model.address.country_code，帮助程序比较新值，如果所选值与所选的值匹配，则将设置为true。

Answer 3

我可以使用如下所示的变量设置所选选项：https://gist.github.com/fenichelar/d3cfa5c59783fdbf02d32bcc3b3a028d

以下是Ember Twiddle：https://ember-twiddle.com/d3cfa5c59783fdbf02d32bcc3b3a028d?openFiles=templates.application.hbs%2C

如何在`<option>`标签上动态设置`selected`属性？

3 个答案: