html - 如何禁用 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"
});

Handlebars

{{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 更明智。