`<option>`タグに `selected`属性を動的に設定する方法はありますか？

Question

Ember guide on binding data attributesは、 "ブール値でデータバインディングを使用すると、指定された属性を追加または削除します。この機能を使用してselectedの属性を<option>に動的に設定しようとしています。私は動的にdisabled属性を設定できますが、selected属性は常に省略されます。ブール値がtrueかfalseかは問いません。この与えられた

テンプレートをハンドルバー：

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

私は、次のHTMLを取得：selected={{true}}がレンダリングされた出力でselected属性を生成しないのはなぜ

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

を？

---

もう少し文脈を与えるために、私はこの記事をHow to do a select in Ember 2.0に従っています。この記事で説明した方法を使用すると、選択したコントローラがonchangeイベントを発生したときに、コントローラのデータを正常に更新できますが、DOMは変更を反映して更新されません。

this ember-twiddleには、2つのselect要素が含まれています。 1つはselect={{bool}}を使用していますが、これは私が望むように動作しません。もう片方は長針の{{#if bool}}...{{else}}...{{/if}}を使っていますが、これはうまくいくものの、ひどいです。

Answer 1

答えを投稿する時間がかかった皆さん、ありがとうございました。

selectedはプロパティ、値

これは私にニュースであり、それは発見のウサギの穴に私を送っしていない属性です：Sonnyのコメントは正しい方向に私を指摘しました。私はthis SO answerが特に役に立ちます。

質問を投稿したときに、属性とプロパティの違いを理解できませんでした。 selected属性がDOMに表示されることを期待していましたが、これは起こりません。 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

Answer 2

ここに見られるように、私は、変数を使用して、選択したオプションを設定することができました。ここで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> 

Answer 3

あなたの「ヘルパー」フォルダの中のどこかに

<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; 
}); 

ブール値を返す場合は、クラス名などを返すこともできます。

アクションは、ユーザーが選択した値をmodel.address.country_codeに設定します。ヘルパーは新しい値を比較します。選択した値が選択されたオプション値と一致する場合、trueに設定されます。