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.

@kingpin2k I want to execute [Holder.run()](http://imsky.github.io/holder/) plugin to redraw images. — petkopalko, Feb 14 '14 at 08:52
I am not sure in relations to EAK but you need to run Holder . run () within the ember run loop. So Holder.run() needs to be called in Ember.run() — elrick, Mar 04 '14 at 17:55
@rick and how I call it in ember run loop? Ive already call `Ember.run.scheduleOnce(...)` as you see in code, but its call only one time at application run. — petkopalko, Mar 05 '14 at 20:18
Now that im thinking about it. This will only run once on insert of the application view. If you reopen Ember view (Ember.View.reopen({...})and add this same code it might work. Its worth a shot. — elrick, Mar 07 '14 at 04:04
@rick Ive tried, but it doesnt work - if I understand clearly I have to run `Ember.View.reopen({Holder.run()});` in didInsertElement event. If I am right I didnt work :) — petkopalko, Mar 10 '14 at 13:35
I will post an answer with more code. That i think should work for you. — elrick, Mar 11 '14 at 02:44

elrick · Accepted Answer · 2014-03-11T03:40:56.007

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

EAK will soon take a back seat to the new Broccoli and Ember-cli so keep a look out for those. They are both still in production but worth to keep an eye and mess around with them at the same time as EAK suppose to be an almost one-to-one step from EAK to Ember-cli & Broccoli. iamstef and joliss are spare heading these projects. Just FYI. — elrick, Mar 11 '14 at 21:21

Ember app kit Application view didInsertElement fired only once

1 Answers1