javascript - 如何将 jQuery Justified Gallery 包装在 Ember 组件中？

Question

我正在尝试包装插件 Justified Gallery在 Ember 组件中。我面临的主要问题是图库中的照片列表来自 API，因此它们是模型的一部分。到目前为止我所拥有的:

App.JustifiedGalleryComponent = Ember.Component.extend({
    _init: function() {
        this.$().justifiedGallery({
            rowHeight: 150,
            fixedHeight: false,
            margins: 7
        });
    }.on('didInsertElement')
});

模板

{{#each photo in items}}
  <div>
    <img src={{photo.thumbUrl}} />
  </div>
{{/each}}

但是我无法让它工作，可能是因为照片列表位于每个循环内，并且应用插件时照片仍然不在 DOM 中？解决这个问题的方法是什么？

谢谢!

编辑:

以 Masonry 组件为引用，我已经差不多排序了，但是第一次导航到 URL 时，如果我转到第二条路线(在 ember 应用程序内)并返回到画廊然后它显示得很好并且合理。这是我现在的组件:

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);
    });
  })
});

Answer 1

问题不在于组件。我的模型正在使用异步(Ember 数据)加载照片。因此，在路由器中，设置模型后，我必须强制 Ember Data 加载我的照片:

afterModel: function(model) {
    return Em.RSVP.all([model.get('photos')]);
}