如何在Ember.js选择菜单中禁用第一个选项

Question

我对Ember很新，到目前为止我很喜欢它！但是，我觉得我已经失去了对某些HTML元素的控制权，特别是<select>菜单，而且它是<option>。

我希望默认（selected）<option>也被禁用，即具有属性disabled。我习惯于这种方法在选择菜单上设置“占位符”，但我也想要其他建议。

例如，如果我有一个性别选择菜单，我想最终得到这段代码：

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

我有以下JavaScript和Handlebars代码：

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

车把

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

生成的HTML

这给了我几乎所需的代码。但是，第一个<option>缺少disabled属性，因此这个问题。

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

此外，它没有设置selected属性，但这并非严格必要，因为它是菜单中的第一个选项。

我感谢任何答案，这个问题的直接答案以及使用disabled之外的其他方法的有效建议。

提前致谢！

Answer 1

HTML被硬编码到模板中，并且没有脑死亡的简单方法。

也就是说，您可以使用以下

对Ember.Select进行子类化

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

您还可以使用layout属性在自动呈现选项上方手动插入占位符：

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

因为这也需要一个子类，我认为使用didInsertElement更明智。

Answer 2

这个答案无耻地利用了@ 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);
            }
        });
    }
});