Cách thêm thuộc tính "Đã tắt" vào các tùy chọn trong Ember.Select

Question

Tôi có chế độ xem Ember.Select, làm cách nào để thêm/liên kết thuộc tính bị vô hiệu với thẻ tùy chọn (KHÔNG chọn toàn bộ hộp chọn).

nghĩa là tôi rất muốn đạt được kết quả sau.

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

Answer 1

Quan điểm Ember.Select không làm điều này ra khỏi hộp. Bạn sẽ cần phải thêm một thuộc tính tùy chỉnh ràng buộc cho disabled và thuộc tính được tính tương ứng để cho Ember biết cách tìm nó.

Cách tiếp cận đơn giản là thêm thuộc tính đã tắt vào mục nội dung/dữ liệu được sử dụng để hiển thị lựa chọn.

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

và mở lại hoặc mở rộng tầm nhìn Ember.SelectOption thêm disabled thuộc tính và tài sản tính.

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

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

}); 

Đây là số đang hoạt động jsbin. Lưu ý rằng tùy chọn ipsum bị tắt.

Answer 2

Bạn có thể xử lý nó trong didInsertElement móc trong giao diện tùy chỉnh Ember.Select của bạn ..

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