ember.js - 将 class/id 关联到 Ember.Select 中的 DropDown 选项

Question

我有一个 Ember.Select View ，使用它我可以将内容数组绑定(bind)到 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: ''
});

然后在我的 Handlebars 模板中，我将其用作

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

一切正常，但 Ember 似乎没有为选项分配指定的类。

Answer 1

如果您想直接在 Ember.js 中执行此操作，则必须 reopen Ember.SelectOption作为 @sabithpocker 建议。所以你想要这样的东西，见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;
}​