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视图不会开箱即用。您需要为disabled添加自定义属性绑定以及相应的计算属性，以告知Ember如何找到它。

一种简单的方法是在用于呈现选择的内容/数据项上添加disabled属性。

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

如何在Ember.Select中为选项添加“已禁用”属性

2 个答案: