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({
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 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

如果您不添加太多的类，那么使用类名称绑定就足够了：

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

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

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

5 个答案: