Geek Answers Handbook

Associate class / id with DropDown options in Ember.Select

I have an Ember.Select View, with which I can bind an array of content to a DropDown list, and then with optionValuePath and optionLabelPath I can assign values ​​and labels accordingly. But is there something like "optionClassPath" so that I can assign the class to the same parameters as I assigned the values

Here is my code snippet:

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

Then in my Handlebars template I used it as

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

Everything works fine, but Ember doesn't seem to assign the given class to the parameters.

+4
source share
2 answers

If you want to do this directly in Ember.js, you need to reopen Ember.SelectOption suggest @sabithpocker . So you want something like this, see http://jsfiddle.net/pangratz666/bhSVn/ :

Rudders

 <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; }​
+2
source

You can check the source here, this master is not a stable release,

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

for stable release it here https://github.com/emberjs/ember.js/blob/0-9-stable/packages/ember-handlebars/lib/controls/select.js

It’s also clear that it’s not possible to set any specific classes for each option, to check the representation responsible for the rendering parameters,

 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); },......

There is no attribute binding for class or class bindings for the parameter.

If you intentionally want to do this, simply select "May not help",

You will need to expand the Option view to include the class, and then extend the Select and use it instead of the base Option used in the handlebars template.

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

You might also consider reopening these classes to make changes if you wish.

UPDATE

If you just want to specify a specific css for the option, you can just use regular css, nothing of the kind is needed, this should only be necessary if you need a separate class for each option.

 select{ background-color:#000000; color:#FFFFFF; } select option{ background-color:red; color:yellow; }

Css like this should help you, I think http://jsfiddle.net/Qpkz5/520/

In addition, if you want separate CSS for each option to be used for modern browsers:

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

There will not always be reasonable conditions when we need to add a certain class to each “variant”, which should be in the case if this extra weight is not present in the Ember Option view. And for such cases of edges it is better to create your own advanced solution.

+1
source

More articles:


All Articles