Geek asks and answers

How to disable the first option in the Ember.js selection menu

I am new to Ember and I still love him! However, I feel like I have lost a little control over some of my HTML elements, in particular in menus <select>and <option>s.

I would like the default ( selected) to <option>also be disabled, i.e. has an attribute disabled. I'm used to this approach for setting the "placeholder" in my favorites, but I also accept other suggestions.

For example, if I had a selection menu for gender, I would like to get this piece of code:

<select>
  <option selected disabled>Please select gender</select>
  <option value="m">Male</select>
  <option value="f">Female</select>
</select>

I have the following JavaScript and Handlebars code:

Javascript

genders = [
  Ember.Object.create({value: 'm', label: 'Male'}),
  Ember.Object.create({value: 'f', label: 'Female'}),
];

App.GenderSelect = Ember.Select.extend({
  contentBinding: "genders",
  optionValuePath: "content.value",
  optionLabelPath: "content.label"
});

Rudders

{{view App.GenderSelect prompt="Please select gender"}}

HTML generated

This gives me almost the code I want. However, in the first there is <option>no attribute disabled, therefore this question.

<select>
  <option value>Please select gender</select>
  <option value="m">Male</select>
  <option value="f">Female</select>
</select>

, selected, , .

, , - , disabled.

!

+5
2

HTML , .

, Ember.Select

didInsertElement: function () {
    this.$('option:first').attr('disabled', true);
}

layout :

layout: precompileTemplate("<option selected disabled>Please select gender</option>{{yield}}")

, , , didInsertElement.

+6

@ChristopherSwasey, Ember.Select , prompt.

Ember.Application.initializer({
    name: 'ember-select-with-nullprompt',

    initialize: function(container, application) {
        Ember.Select.reopen({
            didInsertElement: function () {
                if (this.prompt)
                    this.$('option:first').attr('disabled', true);
            }
        });
    }
});
0

More articles:


All Articles