Ember.js only execute for rerender

Question

I am trying to use retina.js with Ember and I'm running into a problem. Retina.js will swap out img elements with a @2x version if it exists and only does so once when the page is refreshed. Apparently I can loop through img elements and create a new RetinaImage instance for AJAX responses, which seems to work for rendering of Ember views as well but the problem is that it does it twice when the page is initially loaded. I've looked into didInsertElement but it fires when the view is inserted AND rerendered. Is there a way to only limit the new RetinaImage(this) to view rerenders?

Relevant code:

Ember.View.reopen({
  didInsertElement: function() {
    this._super();
    $('img').each(function() {
      new RetinaImage(this);
    });
  }
});

Answer 1

The problem with doing it this way, is every single view that's injected into the page will run this code, against every image, you might run the retina image 100 times on one image. You really should centralize it to each instance where you are inserting images.

Imagining that the Foo view has some images, you would do something like this:

App.ImageView = Ember.View.extend({
  setupRetina: function() {
    this.$('img').each(function() {
      new RetinaImage(this);
    });
  }.on('didInsertElement')
});

Or even better would be to create a component out of it:

App.RetinaImageComponent = Ember.Component.extend({
  setupRetina: function() {
    this.$('img').each(function() {
      new RetinaImage(this);
    });
  }.on('didInsertElement')
});

You can read up more on component's here: http://emberjs.com/api/classes/Ember.Component.html