title: How can I wrap jQuery Justified Gallery in an Ember Component?
body: <p>I'm trying to wrap the plugin <a href="http://miromannino.github.io/Justified-Gallery/" rel="nofollow">Justified Gallery</a> in an Ember component. The main problem that I'm facing is that the list of photos in the gallery come from an API, so they're part of the model. What I have so far:</p>
  
  <pre><code>App.JustifiedGalleryComponent = Ember.Component.extend({
      _init: function() {
          this.$().justifiedGallery({
              rowHeight: 150,
              fixedHeight: false,
              margins: 7
          });
      }.on('didInsertElement')
  });
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>{{#each photo in items}}
    &lt;div&gt;
      &lt;img src={{photo.thumbUrl}} /&gt;
    &lt;/div&gt;
  {{/each}}
  </code></pre>
  
  <p>But I can't get that to work, probably because the list of photo is inside an each loop, and when the plugin is applied the photos are still not in the DOM? What would be the approach for this problem?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>Taking as a reference the component for Masonry I've got this almost sorted, but the first time that I navigate to the URL nothing shows, if I go to a second route (inside the ember app) and go back to the gallery then it displays fine and justified. This is my component now:</p>
  
  <pre><code>import Ember from 'ember';
  
  var getOptions = function (keys) {
    var properties = this.getProperties(keys);
  
    Object.keys(properties).forEach(function (key) {
      if (properties[key] === "null") {
        properties[key] = null;
      }
  
      if (properties[key] === undefined) {
        delete properties[key];
      }
    });
  
    return properties;
  };
  
  export default Ember.Component.extend({
    classNames: ['justified-grid'],
  
    options: null,
    items: null,
  
    setup: Ember.on('didInsertElement', function() {
      this.set('options', getOptions.call(this, [
        'rowHeight',
        'fixedHeight',
        'margins'
      ]));
  
      this.justifyGrid();
    }),
  
  
    justifyGrid: Ember.observer('items.@each', function() {
      var _this = this;
  
      imagesLoaded(this.$(), function() {
          _this.$().justifiedGallery(_this.get('options'));
          _this.set('gridInitialized', true);
      });
    })
  });
  </code></pre>