Problems using 3rd party plugins alongside ember


I’m trying to use isotope in my app and when I try to call it in a separate js file nothing in my app shows up, and I’m not getting any errors in my console either. Can’t figure out what’s going on.


Do the logs show anything?


Nothing, even sticking something simple as added a class or trying to change some css to something bogus just to see if it’s working is not doing anything, it seems the scripts in that file only run on the index route. because once I transition to a new route those scripts won’t seem to run.


Duh, because it only runs once the page is loaded and that means the html in that route aren’t on the page yet. So the solution is to somehow init the isotope plugin from ember correct?


Yes, you’ll need to initialize it after rendering. To do that, you can make use of Ember’s didInsertElement event on your view (in conjunction with the Ember Run Loop), but additionally, you’ll want to observe whatever collection is feeding your isotope container.

Here’s a working example-

Edit- I threw together an Isotope component example as well for fun.


This is great! I’m now able to get this to work, separate from this which I now think is just a CSS issue going on is they are kinda spacing out weird but you have solved my problem, thank you!

One thing though, can you elaborate a little on the need for the cleanupisotope action there and what it’s for?


Basically just a teardown method to remove the isotope functionality and prevent memory from leaking.


So like once it’s done it job, it is turned off so to speak so that it frees of memory for the other bits of the sight to use? I’m not too familiar with the term “memory leak” but I understand it to be when the application it taking up memory for no reason and other things around it trying to use the memory have nothing to work with since it’s being taken up by things that aren’t even using it at that time. Correct?


Basically the references created by initiating the plugin stay in memory, even though the elements get removed. Because those references exist, garbage collection can’t happen and the references stay in memory. Normally all of that is handled by Ember, but because it’s a third party plugin, you need to deal with the cleanup.

Some reading about JavaScript memory leaks here.