0

I want to start some css transition when my page is fully loaded(including all background images), so I am trying didRender event of a component but its never getting called.This is how my codes look like

export default Ember.Component.extend({
    didRender() {
        console.log('did render working');
        var home =$('#main-outlet')[0];
        home.className += " homePage";
        startTimer(5);
    },
    willDestroyElement() {
        console.log("destroying view");
        var home = $('#main-outlet')[0];
        home.className = " wrap";
    }
});

However,when I use didInsertElement event my code works fine but I cant use as it is executed before getting loading the images itself Any idea or an alternative approach on this?

Liam
  • 27,717
  • 28
  • 128
  • 190
Aman Jagga
  • 301
  • 5
  • 15
  • Does this print `did render working` ?. on side note for life cycle methods you can include `this._super(...arguments);`. – Ember Freak Nov 01 '16 at 18:28
  • what version of ember are you using? – roger Nov 01 '16 at 18:36
  • @kumkanillam... no it doesn't print it in console – Aman Jagga Nov 01 '16 at 18:42
  • didRender should be called. you can have other hook like didInsertElement to just print it's been called or not.try it in [ember-twiddle](https://ember-twiddle.com). pls provide ember version too. – Ember Freak Nov 01 '16 at 18:48
  • @kumkanillam. I have already tried didInsertElement, its working. – Aman Jagga Nov 01 '16 at 19:03
  • @roger. I am using discourse(an open source forum framework) and i think they are using Ember 1.12.2 but if it is a version issue, issue should persist with all the events not only with didRender event only – Aman Jagga Nov 01 '16 at 19:05
  • Is didInsertElement hook is fired but not didRender() ? could you pls confirm this ..if that's the case try reproducing it in ember-twiddle and file bug with reproduction.(I believe some thing we are missing. this should not be easily reproducible) – Ember Freak Nov 01 '16 at 19:12
  • 1
    @kumkanillam . I have tried it in twiddle, it looks like didRender is not supported in Ember 1.12.2.Here's twiddle for that https://ember-twiddle.com/09867254753ae4772236d060ab8a24a9?openFiles=components.my-component.js%2Ctemplates.components.my-component.hbs So what can be the alternative approach? – Aman Jagga Nov 01 '16 at 19:30
  • I haven't worked with earlier versions. you might look into their [components files](https://github.com/discourse/discourse/tree/5dbd6a304bed5400be481d71061d3e3ebb4d6785/app/assets/javascripts/discourse/components) you might get idea - – Ember Freak Nov 01 '16 at 20:00

1 Answers1

1

Try this:

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

didRender works everytime after re-render. Maybe you should prefer didInsertElement (that works only once) and schedule your function.

About: Ember Run

ykaragol
  • 6,139
  • 3
  • 29
  • 56
  • It worked, but even afterRender is executing before loading all the background images.Is this how it is supposed to work? – Aman Jagga Nov 02 '16 at 08:59
  • It is normal. Image loading can be handled by img onload event. I've no experiences about that. But there are some [addons](https://github.com/bustlelabs/ember-cli-image) or [other ways](http://stackoverflow.com/questions/7356023/how-to-handle-onload-event-on-img-tag-and-others) to handle this. – ykaragol Nov 02 '16 at 11:09