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

Question

当 Ember 通过 classNameBindings 属性重新计算组件的类时，它会覆盖从外部添加的任何类，例如由 jQuery 直接添加到元素中的类。 p>

重构以通过 classNameBindings 添加“Ember 方式”的类不是一个选项，因为我使用的是添加它们的外部 jQuery 插件，perfect-scrollbar .

我认为问题的发生是因为 Ember 不知道添加的类并且只是忽略它们。

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

<小时/>

我用 minimal working example of the problem here 进行了调整。 (如果有办法使用代码片段获取有效的 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 应用程序已经开始避免使用 jQuery 和其他进行 DOM 操作的 JavaScript 库，而是编写 Ember 组件，以避免您遇到的一些困难。 Ember 本身很快就会停止默认包含 jQuery。

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

此答案自 Ember 3.4 起生效。