How can I trigger layout() from onClick?

[kitsunde]

I have a component that uses masonry. When a user clicks on a masonry item, I catch an onClick event, I set item.active to true which will then expand the item. Now that the item is larger I need masonry to layout, but I don't know how I'm supposed to get the masonry-grid reference to masonry. I end triggering it myself with:

export default Ember.Component.extend({
  actions: {
    onItemClick(event, item){
      item.set('active', true);
      Ember.run.next(this, ()=>{
        Ember.$(event.target).parent().masonry();
      });
    }
  }
});

In my hbs:

{{#masonry-grid items=model customLayout=true as |item index grid|}}
  {{#masonry-item item=item grid=grid onItemClick=(action 'onItemClick') class=(if item.active 'expanded')}}
    {{item.caption}}
  {{/masonry-item}}
{{/masonry-grid}}

But that causes the layout to snap in place, presumably because masonry gets re-initialized. How are people expected to handle resizing masonry-items with ember-masonry-grid?

[CourtneyJooste]

I may just be an absolute monster, but I had to do the following to call masonry layout:

1) In node modules>ember-masonry-grid>addon>components>masonry-grid>component.js above line 94 (masonry.layout(); in didRender method) I inserted the following line: this.sendAction('storeMasonryRef', masonry);

2) In my controller I created an action (maybe in your case, your component): storeMasonryRef(ref){ this.set('masonryRef', ref); }

3) Then I can call masonryRef.layout();

Haven't as yet found a better method. And yes I know it is barbaric