Wrapping a jQuery plugin in a Ember.js component (Screencast)


Time for another screencast! This one is shorter and shows how easy it is to wrap a jQuery plugin in an Ember.js component for reuse.

This is a companion discussion topic for the original entry at http://eviltrout.com/2014/06/03/jquery-component.html


Great screencast Robin. I thought it would be useful and instructive to show how to use the same plugin within an AngularJS directive, so I recorded a screencast as a counterpoint to yours and posted it on my blog.

As a side note, I’m curious what you use for audio recording because I had to run mine through Audacity a couple times and I’m still not totally satisfied with it.


I really loved your screencast. It’s amazing how similar ng-boilerplate is to ember-cli for many of the approaches.

As for audio, I bought Screenflow and it records via my headset. I have a nice headset because we all remote at Discourse and have multiple skype calls every week.


Very nice screencast, super helpful and very clear! I left ember.js a year ago and, wow, things have changed a lot. It’s so much easier to wrap jquery plugins now. It’s very pleasant to get back to it and find a massive boost of productivity even if I have to re-learn a couple of things.
Keep up the good work with these mid-level tutorial, it’s perfect ^^


I’m fairly new to Ember.js and this was a simple and terrific screencast!

I just wanted some clarification on the best practice to follow when dealing with non ember libs async callbacks.

change: function(v) {
   self.set('value', v)

Shouldn’t this be wrapped in a RunLoop run function?



Good catch!

Yes, it works without it but the best practice is to wrap anything that happens in a callback outside your application code in Ember.run


I have a quick question. I noticed that you are using an _underscore when defining the methods in your component… but isn’t there an actual didInsertElement hook already available? I know i have used that hook in some views i made… so are components different in how you do this, or is it a style thing?


Prefixing a method with an underscore is a style thing. I use it because Javascript doesn’t really have the concept of private methods.

didInsertElement can be defined on a view or component, and it will be called once that thing is inserted into the DOM. However, it’s really easy to forget to call this._super() if you are using inheritance. So instead I prefer to use the .on('didInsertElement') syntax, which allows you to decalre as many didInsertElement events as you want, all without calling super.


Ok, thanks! That makes sense. I will try to remember that when i someday need to worry about inheritance.