如何在一個ember 2.0組件中創建動態classNames？

例如： Ember組件允許您添加一個classNames數組，並且這些類將被添加到該組件的主div。說，我們把這種現象稱之爲組件新的div如何在一個ember 2.0組件中創建動態classNames？

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

然後如果你渲染的時候，你會看到檢查這個組件：

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

，這是好的，但我的問題是，如果我想什麼有時使用此組件作爲流體容器，有時我可能想使它成爲超大容量等。

有沒有辦法在html中執行此操作，並讓component.js正確應用它？

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

然後在component.js：

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

來源

2016-01-26 pfg

看看[classNameBindings]（http://emberjs.com/api/classes/Ember.Component.html#property_classNameBindings） –

@Craicerjack'classNames'不是'classNameBindings' –

您可以通過class屬性中指定它們的組件只需添加類名：

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

來源

2016-01-26 17:52:44 dmk

哈哈！謝謝！我在這方面想的太難了！ – pfg

不是'classNames'屬性還是最近改變了？ – akst

@ABot我認爲'class'工作，因爲他們移動到htmlbars，這是一個更好的選擇，但'classNames'仍然可以工作。 – dmk

只是作爲一個可供選擇的一個可以使用類似這樣的東西

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-28 13:49:18

的@dmk'solution是最乾淨的一個，但如果你的情況下它不工作，你可以使用classNameBindings：

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

來源

2016-03-07 13:07:12 fguillen

當你希望組件控制自己的類名時，這一點很棒。 – Skitterm

這可能只是'classNameBindings：['myClassNames']，'其中'myClassNames'是在模板上聲明的屬性。沒有必要的計算屬性（當然在你的例子中，這是因爲OP有一個以逗號分隔的列表）。 – Jason

如果有人用燼成分，CSS，你可能想嘗試一下join-classes或local-class屬性助手。

{{join-classes styles.myclass1 attributeValue}}

attributeValue可以是從組件控制器（我的意思是component.js）或each塊內的項的值。

如果styles.myclass1 = .class1，並attributeValue = .dummy，然後選擇將可作爲styles.css中。

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

如果myvalue = 'part'，然後用這個，生成的類名稱將包括tree-to-component_myclass-part__sdfje2jbr2（最後一部分生成的ID），並且將在樣式表作爲.myclass-part訪問。

來源

2017-02-01 06:10:04

如何在一個ember 2.0組件中創建動態classNames？

回答

相關問題