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: ''
});

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

{{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 中执行此操作，则必须reopen Ember.SelectOption按照@sabithpocker 的建议进行操作。所以你想要这样的东西，见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 可能无济于事，

您还必须扩展 Option 视图以包含类，然后扩展 Select 并使用它而不是车把模板中使用的基本 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;
}

通常不会有我们需要为每个“选项”添加特定类的情况，这应该是 Ember 选项视图没有额外权重的情况。对于这种边缘情况，最好创建自己的扩展解决方案。

于 2012-07-21T06:51:17.060 回答