Ember app kit Application view didInsertElement fired only once

Question

Hi I use Ember app kit and I need to fire a didInsertElement every time I changed route(child view - view in outlet). I need something like global app DOM ready event.

I found mavilein's solution but it doesnt work.

Here is my app/views/application.js:

export default Ember.View.extend({
   didInsertElement : function(){
      this._super();
      Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
   },
   afterRenderEvent : function(){
     // implement this hook in your own subclasses and run your jQuery logic there
     console.log("FIREEEEE");
  }   
});

When I run the app it fires the didInsertElement, but when I change route(click on link) it doesnt trigger the application view didInsertElement event.

I know that application view doesnt change, but I need something what fires every time I change child view. Or am I ruining the architecture and do it other way?

Thanks for any help.

Answer 1

Hey @petkopalko from what you said in the comments you want to use Holder.js for placeholder images and like you said you need to execute the Holder.run() function because of how holder.js works. What you can do is add Holder.run() to each view that needs it in the didInsertElement hook but that is not what you want to do and that could get tiresome.

Now from your code above, with Ember App Kit (EAK) and the resolver i think what you are actually doing by saying:

 export default Ember.View.extend({...

from within app/views/application.js is actually exporting a View associated with the ApplicationView which is why is will only execute once because the Application View gets insert on page load.

I was doing a little hacking and what seems to work is that you have to reopen Embers view class (object) and add the holder.run in the didInsertElement hook. What seems to work best from me from within EAK with reopening Ember base classes is do it in the app.js file.

That would look like this in app.js file:

 Ember.View.reopen({
   didInsertElement: function(){
     Ember.run.next(function(){
       Holder.run();
     }
   }
 });

And it seems to work with just ember.run

 Ember.View.reopen({
   didInsertElement: function(){
     Ember.run(function(){
       Holder.run();
     }
   }
 });

And if you want you can keep all you code from before just place it in app.js

Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
 },
 afterRenderEvent : function(){
   // implement this hook in your own subclasses and run your jQuery logic there
   console.log("FIREEEEE");

   //You can place the holder.run() function here and not in views

   Holder.run();
 }

});

If you dont place Holder.run() in your afterRenderEvent function in the reopen View. You will have to place it in the views afterRenderEvent function that you seems to want.

 SomeView = Ember.View.extend({
   afterRenderEvent: function() {
     this._super();
     Holder.run();      
   }
 }); 

Not sure of side effects with these approaches but you can explore them after implementing. So you have a few options here: Happy coding.

Attached here is a jsbin that seems to illustrate the behavior that i think you are looking for:

http://emberjs.jsbin.com/medamata/6/edit