4

Ember.Selectビューがあり、これを使用してコンテンツの配列をDropDownリストにバインドし、optionValuePathとoptionLabelPathを使用してそれぞれ値とラベルを割り当てることができます。しかし、値を割り当てたのと同じようにオプションにクラスを割り当てることができるように、「optionClassPath」のようなものはありますか？

これが私のコードスニペットです：

MyApp = Ember.Application.create();
MyApp.MyView = Ember.View.extend({
  myArr: [{category:"spend",id:"1",cls:"dropdownOption"},{category:"cashflow",id:"2",cls:"dropdownOption"}]
  myVal: ''
});

次に、ハンドルバーテンプレートで次のように使用しました

{{view Ember.Select
   contentBinding="MyApp.MyView.myArr"
   selectionBinding="MyApp.MyView.myVal"
   optionLabelPath="content.category"
   optionValuePath="content.id"
   optionClassPath="content.cls"
}}

すべて正常に動作しますが、Emberは指定されたクラスをオプションに割り当てていないようです。

4

2 に答える 2

2

Ember.jsで直接これを実行したい場合は、 @sabithpockerが提案したreopen Ember.SelectOptionように実行する必要があります。したがって、このようなものが必要です。http ：//jsfiddle.net/pangratz666/bhSVn/を参照してください。

ハンドルバー：

<script type="text/x-handlebars" >
    {{view Ember.Select
       contentBinding="MyApp.myController"
       selectionBinding="MyApp.myController.myVal"
       optionLabelPath="content.category"
       optionValuePath="content.id"
       optionClassPath="content.cls"
    }}
</script>​

JavaScript：

MyApp = Ember.Application.create({});

Ember.SelectOption.reopen({
    classNameBindings: 'optionClass'.w(),
    optionClass: function(){
        var classPath = this.getPath('parentView.optionClassPath');
        return this.getPath(classPath);
    }.property('parentView.optionClassPath')
});

MyApp.myController = Ember.ArrayProxy.create({
  content: [{category:"spend",id:"1",cls:"dropdownOption"},{category:"cashflow",id:"2",cls:"dropdownOption"}],
  myVal: ''
});​

CSS：

.dropdownOption {
    background-color: green;
}​
于 2012-07-22T04:37:23.580 に答える
1

ここでソースを確認できます。これはマスターではなく安定したリリースです。

https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/select.js

安定したリリースについては、こちらhttps://github.com/emberjs/ember.js/blob/0-9-stable/packages/ember-handlebars/lib/controls/select.js

これでも、各オプションに特定のクラスを設定するオプションがないことは明らかです。レンダリングオプションを担当するビューを確認してください。

Ember.SelectOption = Ember.View.extend({
  tagName: 'option',
  attributeBindings: ['value', 'selected'],

  defaultTemplate: function(context, options) {
    options = { data: options.data, hash: {} };
    Ember.Handlebars.helpers.bind.call(context, "view.label", options);
  },......

クラスの属性バインディングもオプションのクラス名バインディングもありません。

意図的にこれを拡張したい場合は、Selectだけでは役に立たない可能性があります。

オプションビューを拡張してクラスも含める必要があります。次に、ハンドルバーテンプレートで使用されるベースオプションビューの代わりに、選択を拡張してこれを使用します。

Ember.Handlebars.compile('{{#if view.prompt}}<option value>{{view.prompt}}</option>{{/if}}{{#each view.content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}')

必要に応じて、これらのクラスを再度開いて変更を加えることも考えられます。

アップデート

オプションに特定のcssを指定したい場合は、通常のcssを使用できます。このようなものは必要ありません。これは、オプションごとに個別のクラスが必要な場合にのみ必要です。

select{
background-color:#000000;
    color:#FFFFFF;
}  

select option{
background-color:red;
    color:yellow;
}

このようなCSSは、私が推測するのに役立つはずですhttp://jsfiddle.net/Qpkz5/520/

また、オプションごとに個別のcssが必要な場合は、次のようなものを最新のブラウザーに対して使用できます。

select option[value="option1"]{
background-color:green;
}

通常、各「オプション」に特定のクラスを追加する必要がある条件はありません。これは、Emberオプションビューにその余分な重みがない理由です。そして、そのようなエッジケースの場合は、独自の拡張ソリューションを作成することをお勧めします。

于 2012-07-21T06:51:17.060 に答える