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中？这个问题的解决方法是什么？

谢谢！

编辑：

作为参考，砌体的组件我已经得到了这个几乎排序，但我第一次导航到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);
    });
  })
});

如何在一个Ember组件中包装jQuery Justified Gallery？

0 个答案: