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

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 名称，只需在组件的 class 属性中指定它们即可：

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

Answer 2

作为一种替代方法，可以使用类似这样的东西

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

Answer 3

is the cleanest one, but if your scenario it is not working you can use classNameBindings:

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

Answer 4

如果有人在使用 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.

Answer 5

如果您没有添加太多 classes，使用 class 名称绑定就足够简单了：

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

并设置 foo 的值：

{{new-div foo=true}}

这将打开以上所有 class 个名称。

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

当然，计算属性和映射数组可能会比较棘手。另外：我喜欢避免明确地为组件分配动态 class 名称。事情很快变得一团糟。

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

How do I make dynamic classNames in an ember 2.0 component?

ember.js

ember.js-2