Question

I have a Ember.Select View, using which I can bind an Array of contents to DropDown list, then using optionValuePath & optionLabelPath I can assign value & labels respectively. But is there something like “optionClassPath” so that I can assign class to the options just like I assigned values

Here’s 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 don’t seem to assign specified class to the options.

Answer 1

If you want to do this in Ember.js directly, you’ll have to reopen Ember.SelectOption as @sabithpocker suggested. So you want something like this, see http://jsfiddle.net/pangratz666/bhSVn/:

Handlebars:

<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;
}​