javascript - Ember.Select のオプションに「無効」属性を追加する方法

Question

Ember.Select ビューがあります。オプション タグ (選択ボックス全体ではなく) に無効な属性を追加/バインドするにはどうすればよいですか。

つまり、次の結果を達成したいと思っています。

<select>
    <option value="1" disabled>I am a disabled option</option>
    <option value="2">Im selectable</option>
</select>

Answer 1

ビューはそのままではこれEmber.Selectを行いません。disabledEmber に検索方法を伝えるには、カスタム属性バインディングと対応する計算プロパティを追加する必要があります。

簡単な方法は、選択のレンダリングに使用されるコンテンツ/データ項目に無効属性を追加することです。

App.ApplicationController = Ember.Controller.extend({
  choices: function() {
    return [
      Ember.Object.create({firstName: "Lorem", id: 1}),
      Ember.Object.create({firstName: "Ipsum",    id: 2, disabled: true}),
      Ember.Object.create({firstName: "Dolor", id: 3}),
      Ember.Object.create({firstName: "Sit", id: 4}),
      Ember.Object.create({firstName: "Amet", id: 5})
    ];
  }.property()
});

Ember.SelectOptionビューを再度開くか拡張して、disabled属性と計算されたプロパティを追加します。

Ember.SelectOption.reopen({
  attributeBindings: ['value', 'selected', 'disabled'],

  disabled: function() {
    var content = this.get('content');
    return content.disabled || false;
  }.property('content'),

});

これは動作中のjsbinです。ipsumオプションが無効になっていることに注意してください。

Answer 2

didInsertElementカスタムビューのフックで処理できEmber.Selectます..

didInsertElement: function () {
    this.$('option[value="1"]').attr('disabled', true);
}