javascript - How can I wrap jQuery Justified Gallery in an Ember Component? -
i'm trying wrap plugin justified gallery in ember component. main problem i'm facing list of photos in gallery come api, they're part of model. have far:
app.justifiedgallerycomponent = ember.component.extend({ _init: function() { this.$().justifiedgallery({ rowheight: 150, fixedheight: false, margins: 7 }); }.on('didinsertelement') });
template
{{#each photo in items}} <div> <img src={{photo.thumburl}} /> </div> {{/each}}
but can't work, because list of photo inside each loop, , when plugin applied photos still not in dom? approach problem?
thanks!
edit:
taking reference component masonry i've got sorted, first time navigate url nothing shows, if go second route (inside ember app) , go gallery displays fine , justified. component now:
import ember '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); }); }) });
the problem wasn't in component. model loading photos using async (ember data). reason, in router, after setting model, had force ember data load photos:
aftermodel: function(model) { return em.rsvp.all([model.get('photos')]); }
Comments
Post a Comment