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

Question

例如：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')]
});

Answer 1

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

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

Answer 2

您可以通过在组件的class属性中指定类名来添加类名：

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

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

当然，您可能会对计算属性和映射数组感到棘手。 另外：我希望避免明确地为组件分配动态类名。 事情变得混乱得很快。

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

Answer 5

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

{{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包括tree-to-component_myclass-part__sdfje2jbr2 （最后一部分是生成的id），并且可以在样式表中作为.myclass-part 。