9

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

5 回答 5

14

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

export default Ember.Component.extend({
  classNameBindings: ['getClassNames'],
  getClassNames: Ember.computed('extra-classes', function(){
    return this.get('extra-classes').replace(',', ' ');
  })
})
于 2016-03-07T13:07:12.013 回答
13

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

{{new-div class="class1 class2"}}
于 2016-01-26T17:52:44.093 回答
1

如果您不添加太多类，则使用类名绑定很容易：

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

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

于 2019-05-07T06:25:10.667 回答
0

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

{{join-classes styles.myclass1 attributeValue}}

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

如果styles.myclass1 = .class1, 和attributeValue = .dummy, 那么选择器将.class1.dummy在styles.css 中可用。

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

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

于 2017-02-01T06:10:04.463 回答
0

就像另一种可以使用这样的东西

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(),
});
于 2016-01-28T13:49:18.727 回答