Triggering didInsertElement in a dynamic route

I have a component where once it is initialized it calls masonry on the component:

export default Ember.Component.extend({

didInsertElement: function(){
    $('.grid').masonry({
        itemSelector: '.grid-item',
        gutter: 20
    });
}

});

Router: this.route(‘projects’, {path: ‘/projects/:project_name’});

However this only triggers on the initial route render. When I transition between different project_name masonry does not get triggered again. Found in a different thread that didInsertElement does not get triggered within the same route transitions.

So how is it possible to have functions called on dynamic route transitions?

Is .grid an element within the component? If so, change your selector logic to this.$('.grid'). If not, then the component is working outside of its scope so you should fix that also.

Now, I don’t know how grid is constructed but I’ll assume it takes some attribute that changes according to the project_name. If this is the case, then changing any attribute passed into the component should trigger a render cycle.

If what I am saying is correct, then you can do this:

didRender() {
  this.$('.grid').masonry({
    itemSelector: '.grid-item',
    gutter: 20
  }); // or maybe masonry has an api to "refresh" or something (I don't use it)
}

There is also the assumption you are on >= 1.13.0. Lots of assumptions here since I don’t know the full story and this is the best I think anyone can do to help. This can be done in a way that doesn’t use observers.

If you want a more precise answer than I need to see the code.

1 Like