时间戳

首页 > 解决方案 > Ember.js - classNameBindings 正在删除从外部添加的类

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

问题描述

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

重构以通过“Ember 方式”添加类classNameBindings不是一种选择，因为我使用的是添加它们的外部 jQuery 插件，完美滚动条。

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

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

我在这里提出了一个问题的最小工作示例 （如果有办法使用代码片段获得一个工作的 ember 示例，请告诉我并编辑）

标签： javascriptember.js

解决方案

在 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 的最新答案。

推荐阅读