Question

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

我已尝试使用didInsertElement()和didRender()挂钩，但看起来他们不会等待加载背景图片。

以下是我的组件的代码段：

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挂钩，来实现您正在寻找的执行顺序。试试这个：

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个钩子，以显示load window reloadItem事件监听器的正确拆除和删除。

我已经创建了一个Ember Twiddle example来为您演示。

有没有类似于`onload`的Ember事件

1 个答案: