Ember.js-classNameBindings正在刪除從外部添加的類

Question

當Ember通過classNameBindings屬性重新計算組件的類時，它將覆蓋從外部添加的任何類，例如jQuery直接添加到該元素的類。

不能通過classNameBindings重構以使類添加為“ Ember方式”，因為我使用的是外部jQuery插件，將它們添加為perfect-scrollbar 。

我想發生問題是因為Ember不知道所添加的類，只是忽略了它們。

對於這種情況，是否有一種干凈的方法/解決方法？

---

我在這里用一個最小的問題示例進行了討論 （如果有一種方法可以使用代碼片段獲取余燼示例，請告訴我並進行編輯）

Answer 1

在Ember重新釋放組件后，您需要還原從Ember外部操縱的所有DOM狀態。

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['component'],
  classNameBindings: [
    'flag:emberClassA:emberClassB'
  ],

  flag: false,

  didRender() {
    Ember.run.scheduleOnce('afterRender', this, this.restoreJQueryClass);
  },

  restoreJQueryClass() {
    if (this._savedClassState) {
      this.$().addClass('jQueryClass', this._savedClassValue);
    }
  },

  actions: {
    toggleFlag () {
      this.toggleProperty('flag');
    },
    toggleClassFromOutside() {
      this.$().toggleClass('jQueryClass');
      this.set('_savedClassState', this.$().hasClass('jQueryClass'));
    }
  }
});

通常，當今大多數Ember應用程序已開始避免執行DOM操作的jQuery和其他JavaScript庫，而是編寫Ember Components以避免您遇到的一些困難。 默認情況下，Ember本身將很快停止包含jQuery。

這是更新的Twiddle： https ://ember-twiddle.com/86ed63a495dbc010a3e7bfb18e2a839a ? openFiles = components.x-example.js%2C

這個答案是從Ember 3.4起最新的。