5

私はEmberにかなり慣れていません、そして私は今のところそれを愛しています！<select>ただし、HTML要素の一部、特にメニューを少し制御できなくなったように感じます<option>。

selectedデフォルト（ ）<option>も無効にしたい、つまり属性を持っているようにしたいdisabled。私は、選択したメニューに「プレースホルダー」を設定するためのこのアプローチに慣れていますが、他の提案もあります。

たとえば、性別の選択メニューがある場合、最終的に次のコードを作成します。

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

私は次のJavaScriptとハンドルバーのコードを持っています：

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

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 に答える