Question

当Ember通过classNameBindings属性重新计算组件的类时，它将覆盖从外部添加的所有类，例如jQuery直接添加到该元素的类。

通过classNameBindings进行重构以使类添加为“ Ember way”不是一种选择，因为我使用的是外部jQuery插件，将其添加为perfect-scrollbar。

我想发生问题是因为Ember不知道所添加的类，只是忽略了它们。

对于这种情况，是否有一种干净的方法/解决方法？

我用minimal working example of the problem here 进行了旋转（如果有一种方法可以使用代码段获取有效的余烬示例，请告诉我并进行编辑）

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起有效。

Ember.js-classNameBindings正在删除从外部添加的类

1 个答案: