Ember, ember-cli, Masonry, Isotope, Packery. How to use?

I'm using Packery and Isotope (one at time) like this:

I writed in terminal:

bower install packery --save

then in my ember-cli-build.js I added app.import ecc...

Now, following this answer: Ember-cli, Masonry, Isotope, Packery. How to use?

I want something like this: http://ift.tt/1G99rp3

so, I create a component with:

ember g component packery-grid

"Then, in component's didInsertElement hook I call Packery on component's jQuery element:"

import Ember from 'ember';

export default Ember.Component.extend({

    classNames: ['grid'], 

    didInsertElement() {
      this.$().packery({
        itemSelector: '.itemPack',
        gutter: 20
            });

            this.$().find('.itemPack').each( function( i, itemElem ) {
            // make element draggable with Draggabilly
            var draggie = new Draggabilly( itemElem );
            // bind Draggabilly events to Packery
            this.$().packery( 'bindDraggabillyEvents', draggie );
          });
    }

});

Then, I'm using:

{{#packery-grid}}
  ... HTML here
{{/packery-grid}}

BUT IT GIVES TO ME THIS ERROR:

Uncaught TypeError: this.$ is not a function

Why in that answer the author is using: this.$() ???

UPDATE:

In addition to this, now i'm getting this warning:

DEPRECATION: A property of <myapp-front@view:-outlet::ember453> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]

Why all this?

Whats is the goody way of using Packery, Isotope, Masonry in Ember?