如何在 ember 2.0 组件中创建动态类名？答案

【问题标题】：How do I make dynamic classNames in an ember 2.0 component?如何在 ember 2.0 组件中创建动态类名？
【发布时间】：2016-01-26 17:37:50
【问题描述】：

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

的组件

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

如果你在渲染时检查这个组件，你会看到：

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

这很好，但我的问题是，如果我有时想将此组件用作流体容器，有时我可能想将其设为 jumbotron 等。

有没有办法在 html 中执行此操作并让 component.js 正确应用它？

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

然后在component.js中：

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

【问题讨论】：

看看classNameBindings
@Craicerjack classNames 不是 classNameBindings

标签： ember.js ember.js-2

【解决方案1】：

@dmk'solution 是最干净的，但如果您的方案不起作用，您可以使用classNameBindings：

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

【讨论】：

当您希望组件控制自己的类名时，这个非常有用。
这可能只是classNameBindings: ['myClassNames'],，其中myClassNames 是在模板上声明的属性。不需要计算属性（当然在您的示例中这是因为 OP 有一个逗号分隔的列表）。

【解决方案2】：

您只需在组件的class 属性中指定类名即可添加类名：

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

【讨论】：

属性不是classNames 还是最近改变了？
@ABot 我认为 class 在他们迁移到 htmlbars 后有效，这是一个更好的选择，但 classNames 仍然有效。

【解决方案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

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

【讨论】：

【解决方案4】：

作为替代方案，可以使用类似的东西

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

【讨论】：

【解决方案5】：

如果有人在使用 ember-component-css，您可能需要尝试 join-classes 或 local-class 属性助手。

{{join-classes styles.myclass1 attributeValue}}

attributeValue 可以是来自组件控制器的值（我的意思是component.js），也可以是each 块内的项目。

如果styles.myclass1 = .class1 和attributeValue = .dummy，则选择器将在styles.css 中以.class1.dummy 的形式提供。

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

如果是myvalue = 'part'，那么生成的类名将包括tree-to-component_myclass-part__sdfje2jbr2（最后一部分是生成的id），并且可以在样式表中作为.myclass-part访问。

【讨论】：