如何在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.