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

Ember guide on binding data attributes表示“如果您使用数据绑定与布尔值，它将添加或删除指定的属性。”我试图使用此功能在<option>上动态设置selected属性。我发现我可以动态设置disabled属性，但selected属性总是被忽略，不管布尔值是true还是false。如何动态设置'<option>`标签上的`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上的这篇文章。使用该文章中描述的方法，当选择onchange事件触发时，我可以成功更新控制器中的数据，但DOM不会更新以反映更改。

我已经放在一起this ember-twiddle，其中包括两个select元素。一个使用select={{bool}}，这不符合我的要求。另一个使用长手{{#if bool}}...{{else}}...{{/if}}，它确实有效，但看起来很糟糕。

来源

2017-01-24 nelstrom

'selected'是一个属性，不是属性值 – Sonny

是否硬编码“{{true}}”和“{{false}}”的问题？你的例子有点做作。您可以硬编码“selected”属性的存在或不存在，而不是硬编码“{{true}}”和“{{false}}”。 –

@ChrisPeters我承认使用'{{true}}'和'{{false}}'看起来很有意思，但我想保持简单。如果'{{}}引用了返回“true”或“false”的计算属性，结果将是相同的。 – nelstrom

感谢大家花时间发布答案我的问题。Sonny的评论我指出了正确的方向：

selected是一个属性，而不是用值

这消息给我，他派我来发现的兔子洞的属性。我发现this SO answer特别有用。

当我发布的问题，我不明白属性和属性之间的差异。我期待看到DOM中出现selected属性，但这不会发生。我现在知道selected属性正在被正确设置，并且<option>标记未出现在具有selected属性的DOM中的事实并不重要。

此代码片段有助于说明我为什么感到困惑。由此产生的<select>下拉菜单都显示为相同，最初选择了选项2。当它的使用selected={{true}}设置selected属性不会出现在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

来源

2017-01-26 18:44:40 nelstrom

我能够设置使用变量选择的选项，在这里看到：https://gist.github.com/fenichelar/d3cfa5c59783fdbf02d32bcc3b3a028d

这里是灰烬玩弄：https://ember-twiddle.com/d3cfa5c59783fdbf02d32bcc3b3a028d?openFiles=templates.application.hbs%2C

相关代码：

的application.js

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    one: false, 
    two: true, 
    three: false 
});

申请。 HBS

<div> 
    <select> 
    <option selected={{one}}>One</option> 
    <option selected={{two}}>Two</option> 
    <option selected={{three}}>Three</option> 
    </select> 
</div>

来源

2017-01-24 22:06:48

这是不正确的。你不需要引号。它应该以任何方式工作。 –

@ChrisPeters你是对的，我已经更新了我的答案以反映实际问题。 –

您可以使用该期权价值的地方比较您参考像

<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。

来源

2017-01-25 16:20:36

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

回答

相关问题