Iconic JS not rendering properly with Ember

Question

I am working on an EmberJS application (my first one) and I am hitting a few stumbling blocks.

I am making pretty good progress with most of the application logic, however one thing that is really nagging at me is IconicJS not working properly. Essentially, IconicJS "injects" the SVG data into an <img> element, and as such needs to be run every time there are new <img> elements with the appropriate class. One would do so with something like:

IconicJS().inject("img.iconic");

So I gave it a shot by putting it in app/views/application.js alongside Foundation's initialization:

import Ember from 'ember';

export default Ember.View.extend({
  didInsertElement: function() {
    this.$().foundation();
    IconicJS().inject('img.iconic');
  }
});

This appears to only trigger on initial page loads, however. As a result, any navigation after the initial page load results in svg <img> tags not getting rendered properly.

I am not sure if it has to do with the way I am loading my data, though, as I am very new to Ember.

If anyone has any ideas, I would really like to hear them. I apologize in advance if I am not providing enough information. I'll gladly add more if needed.

EDIT

Thanks to MrVinz, I was able to finish this up. What I needed was an initializer. Since I am using an Ember-CLI app, that would reside in app/initializers/initialize-assets.js. The content of that file is (in my case):

import Ember from 'ember';

export default {
  name: 'initialize-assets',
  initialize: function() {
    Ember.Route.reopen({
      renderTemplate: function() {
        this.render();
        var initResources = function() {
          Ember.$().foundation();
          IconicJS().inject('img.iconic');
        };
        Ember.run.scheduleOnce('afterRender', initResources);
      }
    });
  }
};

While I am still not 100% that this is the best way to solve this problem from a performance standpoint, it seems to work for now (all applicable <img> tags are getting injected and Foundation is still working properly) so I think this solves it for now.

Thanks again!

Answer 1

Well that's work only for your application view ;)

For something more "generic" which work on any route you can try do something like in this post : Global hook in Ember when template is rendered

With cli you can create a CustomRoute in app/routes/custom.js

export default Ember.Route.Extend({
    renderTemplate : function(){
    this.render();var myfunction=function(){
      //do your jquerystuff here
       Ember.$().foundation();
       IconicJS().inject('img.iconic');
    }
    Ember.run.scheduleOnce('afterRender', myfunction);
  }
});

If it's for using on all your routes you can "Reopen" the default framework Route implementation in an initializer like explained in this post : Ember CLI: where to reopen framework classes