Question

我有一个Ember.Select View，使用它可以将一个内容数组绑定到DropDown列表，然后使用optionValuePath＆amp; optionLabelPath我可以分配值＆amp;标签分别。但是有类似“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中执行此操作，则必须建议{strong} @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;
}

Answer 2

你可以在这里查看来源，这是掌握不稳定的发布，

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

对于选项，类和属性绑定都没有属性绑定。

如果您故意想要这样做，只需选择可能无效，

您还必须扩展Option视图以包含类，然后扩展Select并使用它来代替Handlebars模板中使用的基本Option视图，

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

通常情况下，我们不需要为每个＆＃34;选项添加特定的课程。这应该是为什么Ember Option视图没有额外的重量。对于这样的边缘情况，最好创建自己的扩展解决方案。

将类/ id与Ember.Select中的DropDown选项相关联

2 个答案: