Как сделать динамические имена классов в компоненте ember 2.0?

например: Компоненты Ember позволяют добавлять массив имен классов, и эти классы будут добавлены в основной div компонента. скажем, у нас есть этот компонент под названием new-div

export default Ember.Component.extend({
    classNames: ['container']
});

затем, если вы проверите этот компонент при визуализации, вы увидите:

<div id="ember595" class="ember-view container">
...
<div>

это нормально, но моя проблема в том, что, если я хочу использовать этот компонент в качестве контейнера для жидкости иногда, и иногда я могу захотеть сделать его jumbotron и т. д.

там способ сделать это в html и иметь компонент.js применить его правильно?

{{new-div extra-classes='class1,class2'}}

затем в компоненте.js:

export default Ember.Component.extend({
    classNames: [this.get('class-names')]
});
7
ember-2.0.0 ember.js

4 ответов

Вы можете добавлять имена классов, просто указав их внутри class атрибут вашего компонента:

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

на @ДМК'solution - это самое чистое, но если ваш сценарий не работает, вы можете использовать classNameBindings:

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

просто в качестве альтернативы можно использовать что-то вроде этого

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

если кто-то использует ember-component-css, вы можете попробовать join-classes или local-class вспомогательный атрибут.

{{join-classes styles.myclass1 attributeValue}}

attributeValue может быть значением из контроллера компонента (я имею в виду component.js), или элемент внутри each блок.

если styles.myclass1 = .class1 и attributeValue = .dummy, тогда селекторы будут доступны как .class1.dummy на стили.в CSS.

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

если myvalue = 'part', то с этим, сгенерированное имя класса будет включать tree-to-component_myclass-part__sdfje2jbr2 (последняя часть генерируется id) и будет доступна в таблице стилей как .myclass-part.

0