如何在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 。