CODEWITHSUNDEEP
ember.js
Pedro4441
Pedro4441

Reputation: 261

How to add “Disabled” attribute to options in Ember.Select

I know its not out of the box, but I would like to know what is the easiest approach.

I have got 2 arrays inside a computed property, one with the good options, and one with the "disabled ones".

How could I do it without crashing my other "normal" selects?

Upvotes: 0

Views: 432

Answers (1)

Gosha A
Gosha A

Reputation: 4570

The simplest would be to add a disabled binding to Ember.SelectOption:

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

  init: function() {
    this.disabledPathDidChange();
    this._super();
  },

  disabledPathDidChange: Ember.observer('parentView.optionDisabledPath', function() {
    var valuePath = Ember.get(this, 'parentView.optionDisabledPath');

    if (!valuePath) { return; }

    Ember.defineProperty(this, 'disabled', Ember.computed(function() {
      return Ember.get(this, valuePath);
    }).property(valuePath));
  })
});

Which could then be used like this:

{{view Ember.Select content=model
                    optionLabelPath="content.id"
                    optionValuePath="content.id"
                    optionDisabledPath="content.disabled"}}

In other words, you simply need to have some attribute on every item of content which can tell whether the option should be disabled or not.

http://emberjs.jsbin.com/lewepara/1/edit

Upvotes: 1

Related Questions