5

我对 Ember 很陌生，到目前为止我很喜欢它！但是，我觉得我对一些 HTML 元素失去了一点控制，特别是<select>菜单和它的<option>s。

我希望默认 ( 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.

提前致谢！

4

2 回答 2

6

该 HTML 被硬编码到模板中，并且没有简单的方法可以做到这一点。

也就是说，您可以使用以下子类 Ember.Select

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

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

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

鉴于这也需要一个子类，我认为使用didInsertElement.

于 2013-03-23T01:22:50.817 回答
0

这个答案无耻地利用了@ChristopherSwasey 的答案，但会影响所有Ember.Select使用该prompt属性的全局 s。

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);
            }
        });
    }
});
于 2015-01-28T21:29:55.677 回答