灰燼JS組件結合CSS類名的三個來源

從組件的classNames財產一組靜態類的（靜態JS代碼）
一組通過類名財產在HB-幫手

到這裏我已經成功地測試提供的用戶提供的類 - 灰燼將合併兩個來源我認爲這是很好的。然而，我無法找到這種行爲的記錄。

現在我想能夠添加更多的類到這個列表與計算屬性。

要做到這一點的唯一方法似乎與classNameBindings但這是不足以我的情況！由於類的列表非常動態，我想明確計算它。我也試過的是將classNames定義爲property()，但根據this issue，這似乎是不可能的。

有沒有人知道一種方法來實現這一目標？

來源

2014-10-19 vanthome

這是一種情況，我認爲你不想使用Ember而是直接使用jQuery。使用Ember處理靜態類和通過Handlebars助手提供的類，但使用jQuery添加計算出的屬性類。例如，讓我們說你有一個名爲extraClasses的計算屬性。嘗試是這樣的：

extraClasses: function() { 
    return ['one', 'two', 'three']; 
}.property(), 

previousExtraClasses: [], 

manageClasses: function() { 
    var previousExtraClasses = this.get('previousExtraClasses'); 
    var extraClasses = this.get('extraClasses'); 

    // Remove the classes that got removed from `extraClasses` 
    previousExtraClasses.forEach(function(className) { 
     if (extraClasses.indexOf(className) < 0) { 
      this.$().removeClass(className); 
     } 
    }, this); 

    // Add the classes that got added to `extraClasses` 
    extraClasses.forEach(function(className) { 
     if (previousExtraClasses.indexOf(className) < 0) { 
      this.$().addClass(className); 
     } 
    }, this); 

    this.set('previousExtraClasses', extraClasses); 
).observesImmediately('extraClasses')

每次使用一組新的類更新extraClasses，在manageClasses觀察者將採取組件管理類的照顧。只要extraClasses返回一個字符串數組，它可以任何你喜歡的方式進行計算。

來源

2014-10-19 12:52:39 GJK

是的，我現在使用類似的模式，但我希望有一個無jQuery的方式。如果沒有人提出建議，很快會接受你的回答。 – vanthome 2014-10-19 14:08:08

不幸的是，你有一個非常獨特的用例，所以Ember不太可能有一個很好的方法來完成這個內置操作（雖然我以前錯了）。如果沒有，我認爲在Ember中編寫jQuery是完全正常的，只要你正確地封裝它。也許把它放在基類組件或其他東西上。只要你的組件API的用戶不必處理jQuery，你就是這樣做的。 – GJK 2014-10-19 16:32:35

我不確定我是否完全理解您對classNameBindings的推理。您可以在該屬性的幫助下獲得動態班級列表。我在jsbin中準備了一個示例。

它使用適用於classNameBindings規則：如果沒有條件類已上市（如classNamesBindings: ['isEnabled:enabled:disabled']），比計算屬性類的名稱設置爲是使用（如true||false將是HTML元素的類別列表。）。因此，您需要聲明一個計算屬性，該屬性返回帶有類名稱的字符串，並在組件的classNameBindings中列出此CP。

來源

2014-10-19 16:51:46 Microfed

我不想這樣做的原因是因爲我有4個不同的類（'warning'，'info'，'error'，'success'），並且根據另一個屬性'event'，我想選擇其中的一個。用'classNameBindings'來實現這一點是非常繁瑣的。像這樣的事情，你會想在一個計算屬性中做。 – vanthome 2014-10-19 17:12:27

我認爲這正是我在jsbin中實現的。詳細的版本（爲你的情況）：http://emberjs.jsbin.com/relor/1/edit?html,js,output – Microfed 2014-10-19 17:29:23

好吧，我同意這種方法有一套類取決於單個事件。但是現在讓我們說我需要添加/刪除更多基於其他條件的類，比如'event'。爲此，我必須設置多個'classNameBindgins'，但這不是一個解決方案（太冗長，分散的邏輯）。我想要的是一個函數，它返回一個類的列表，這個列表是用一個相當複雜的邏輯來計算的。如果你可以從'extraClasses（）'返回多個類，你的解決方案就可以（但並不理想）。 – vanthome 2014-10-20 18:17:42

灰燼JS組件結合CSS類名的三個來源

回答

相關問題