Ember.js 如何在ember 2.0组件中生成动态类名？

例如： Ember组件允许您添加类名数组，这些类将被添加到组件的主div中。 假设我们有一个名为新div的组件

export default Ember.Component.extend({
    classNames: ['container']
});

然后，如果在渲染时检查此组件，您将看到：

<div id="ember595" class="ember-view container">
...
<div>

然后在component.js中：

export default Ember.Component.extend({
    classNames: [this.get('class-names')]
});

---

只需在组件的

class

属性中指定类名，即可添加类名：

{{new-div class="class1 class2"}}

---

就像另一个选择一样，你可以用这样的东西

export default Ember.Component.extend({
attributeBindings:  ['style'],

    style: function(){
        return new Ember.Handlebars.SafeString('class="foo bar"');
    }.property(),
});

// NOT sure on this one untested
export default Ember.Component.extend({
attributeBindings:  ['classNames'],

    classNames: function(){
        return 'foo bar';
    }.property(),
});

是最干净的，但如果您的场景不起作用，您可以使用：

---

如果有人正在使用ember组件css，您可能需要试用

连接类

或

本地类

属性帮助器

{{join-classes styles.myclass1 attributeValue}}

attributeValue

可以是来自组件控制器的值（我的意思是

component.js

），也可以是每个

块中的项

如果
styles.myclass1=.class1
和
attributeValue=.dummy
，则选择器将作为
.class1.dummy
在styles.css中提供

local-class={{(concat "myclass-" myvalue)}}

如果
myvalue='part'
，则生成的类名将包括
tree-to-component\u myclass-part\u sdfje2jbr2
（最后一部分是生成的id），并且可以在样式表中作为
访问。myclass-part
如果您没有添加太多的类，那么使用类名绑定就很容易了：

export default Ember.Component.extend({
  classNameBindings: [
    'foo:bar',
    'foo:baz',
  ],
});

并设置foo的值：

{{new div foo=true}}

这将启用上述所有类名

见：

当然，在计算属性和映射数组时可能会遇到困难。另外：我喜欢避免显式地为组件指定动态类名。事情很快就变得一团糟了。
看看@Craicerjack
classNames
不是
classNameBindings
属性
classNames
是不是最近改变了？@abo我认为
class
不起作用，因为它们已经转移到了htmlbars，这是一个更好的选择，但是
classNames
仍然有效。当您希望组件控制其自己的类名时，此选项非常有用。这可以是
classNames绑定：['myClassNames']，
其中
myClassNames
是模板上声明的属性。不需要计算属性（当然，在您的示例中，这是因为OP有一个逗号分隔的列表）。
local-class={{(concat "myclass-" myvalue)}}

export default Ember.Component.extend({
  classNameBindings: [
    'foo:bar',
    'foo:baz',
  ],
});