Implement Masonry and ImagesLoaded in Ember Cli

I am building a Gallery Page retrieving Images from the Flickr API, i have found the need to use Masonry and ImagesLoaded. See here the example of what i need to do implement in my Ember Cli App.

What is the best way to integrate and execute the jQuery logic correctly in my controller?

This is the jQuery Logic i need to integrate

// init Masonry
var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
}); 

as in the example

This is my controller, i have used didInsertElement to do all the setup/init

import Ember from 'ember';

var PhotographyController = Ember.ObjectController.extend({
    didInsertElement : function(){
      this._super();
      Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },

    afterRenderEvent : function(){
      var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer'
      });
      // layout Isotope after each image loads
      $grid.imagesLoaded().progress( function() {
        $grid.masonry();
      });  
    }
});

export default PhotographyController;

For some reason, i can not initialize and make the plugin working, so what is the correct way to do it? I am still using ember version 1.13.11