Come aggiungere l'attributo "Disabilitato" alle opzioni in Ember.Seleziona

Question

Ho una vista Ember.Seleziona, in che modo aggiungere/associare un attributo disabilitato al tag dell'opzione (NON all'intera casella di selezione).

ie, mi piacerebbe realizzare il seguente risultato.

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

Answer 1

La vista Ember.Select non lo fa, fuori dalla scatola. Sarà necessario aggiungere un binding dell'attributo personalizzato per disabled e una proprietà calcolata corrispondente per indicare a Ember come trovarlo.

Un approccio semplice consiste nell'aggiungere l'attributo disabilitato sul contenuto/elemento dati utilizzato per il rendering della selezione.

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

e riaprire o estendere la vista Ember.SelectOption aggiungendo l'attributo disabled e proprietà calcolata.

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

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

}); 

Ecco un lavoro jsbin. Si noti che l'opzione ipsum è disabilitata.

Answer 2

È possibile gestire in didInsertElement anello nelle visualizzazione personalizzata Ember.Select ..

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