javascript - 是否有类似于 `onload` 的任何 Ember 事件

Question

我想在我的 Ember 应用程序中加载所有内容(例如图像)后执行 JavaScript。

我已经尝试使用 didInsertElement() 和 didRender() Hook ，但看起来它们不会等待背景图像加载。

这是我的组件的代码片段:

export default Ember.Component.extend({
    didInsertElement() {
      this._super(...arguments);
      Ember.run.scheduleOnce('afterRender', this, function() {
        var home =$('#main-outlet')[0];
        home.className += " homePage";
        startTimer(5);
      });
    },
});

对此有任何解决方案或替代方法吗？

Answer 1

Ember 没有等同于 onload 的事件。

但是，关于另一种方法，您可以利用 Ember 的 jQuery 别名，结合组件中的 didInsertElement Hook ，来实现您正在寻找的执行顺序。试试这个:

export default Ember.Component.extend({
  didInsertElement() {
    Ember.$(window).on('load', this.executeCssAnimations);
  },

  executeCssAnimations() {
    // your CSS and animation logic would go here
    Ember.$('.big-background')
         .text('NOW READY FOR CSS and ANIMATION UPDATES.')
         .css('color', 'yellow');
  },

  willDestroyElement(...args) {
    this._super(...args);
    Ember.$(window).off('load', 'window', this.executeCssAnimations);
  },
});

willDestroyElement Hook 也已包含在内，以显示从 window 中正确拆卸和删除 load 事件监听器。

我创建了一个 Ember Twiddle example为您演示这一点。