如何在EMB2.0组件中创建动态classNames？

Question

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

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

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

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

这是好的，但我的问题是，如果我想使用这个组件作为流体容器，有时，有时，我可能想让它成为一个巨型加速器等。

有什么方法可以在html中这样做，并让component.js正确地应用它吗？

{{new-div extra-classes='class1,class2'}}

然后在component.js中：

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

Answer 1

只需在组件上的class属性中指定类名，就可以添加类名：

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

Answer 2

@dmk‘解是最干净的，但是如果您的场景不起作用，您可以使用classNameBindings

export default Ember.Component.extend({
  classNameBindings: ['getClassNames'],
  getClassNames: Ember.computed('extra-classes', function(){
    return this.get('extra-classes').replace(',', ' ');
  })
})

Answer 3

如果没有添加太多的类，那么类名绑定就足够容易了：

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

并设置foo的值：

{{new-div foo=true}}

这将对所有上述类名进行切换。

请参阅：https://api.emberjs.com/ember/release/classes/Component/properties/classNameBindings?anchor=classNameBindings

当然，计算属性和映射数组可能会变得很棘手。另外:我喜欢避免显式地为组件分配动态类名。事情很快就会变得一团糟。