如何動態設置'<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`屬性？

回答

相關問題