Triggering didInsertElement in a dynamic route


#1

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?


#2

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.