jQuery is a fast, small and feature-rich JavaScript library. It makes manipulation, event handling, animation, and Ajax much easier with an easy API. Let's see how well it works with Ember.js
Setup
First let's create a very simple project.
$ ember new testjquery
$ cd testjquery
$ ember g template index
$ ember g component jquer1-test
These commands will generate some files for us. Will be using them to testjQuery with. The component will be called jquer1-test.
Basic jQuery
Keep in mind that when you create a new project with Ember CLI by default jQuery is installed. Take a look at the bower.json file and you should see it listed.
// bower.json
...
"jquery": "^1.11.1",
...
Let's see a quick example. In our component we'll create a button and some text. When the button is triggered we want to fade out the text. This is how we'll do it. First we'll edit the component hbs file.
// app/templates/components/jquer1-test.hbs
<div id="test"> This is a test, my age is {{age}}</div>
<button {{action "pressed"}}>
Press Me
</button>
Simple enough, we created a new div tag with some text. We created a button and attached the "pressed" action to it. For fun we added in a property called age.
Next up is the component file.
// app/components/jquer1-test.js
import Ember from 'ember';
export default Ember.Component.extend({
age: 30,
actions: {
pressed: function() {
this.$("#test").fadeOut("slow");
}
}
});
This component has an age property that is set to 10. Then we have our actions. The pressed action triggers our jQuery which simply fades out the test div. You can learn more about the jQuery API here.
Last thing we need to do for this simple example is simply add the component to our index.
// app/templates/index.hbs
{{jquer1-test}}
We could use block form here but there is no need. If you want to learn more about components check out my Ember component examples post.
You can now start the server and it should fade after being pressed
Initialize jQuery
What if we wanted the text to fade in whenever the page loaded. There is a few ways to do this however the most accepted way is to manipulate the didInsertElement event. This event gets triggered when the element of the view has been inserted into the DOM. We can add this event to our component and then manipulate the DOM as we please.
There is one issue though. You may want to wait until everything is rendered in the DOM before you do any manipulation. The easiest way to do that is to use the Ember.run loop. I wrote about the Ember run loop in a previous post so check that out if your want more information.
As an example let's change the component so that when the page loads the text slowly fades out, and after you press the button it fades back in.
// app/components/jquer1-test.js"
import Ember from 'ember';
export default Ember.Component.extend({
age: 30,
actions: {
pressed: function() {
this.$("#test").fadeIn("slow");
}
},
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, function() {
this.$("#test").fadeOut("slow");
});
}
As you can see above we now have added a Ember.run.scheduleOnce to our didInsertElement. This should only run once after everything is rendered.
Another good tip is to destroy any event handlers and objects with willDestroyElement. Since we are doing some simple jQuery effects we don't really need it in this example but we'll go ahead and add it anyways.
// app/components/jquer1-test.js
...
willDestroyElement: function() {
//remove handlers like this.$().off(...)
}
...
If we wanted to we could rewrite the didInsertElement with .on.
// app/components/jquer1-test.js
...
testme: function() {
Ember.run.scheduleOnce('afterRender', this, function() {
this.$("#test").fadeOut("slow");
});
}.on('didInsertElement')
If all goes well it should look like this.
Future
As you can see adding jQuery to your Ember application isn't that bad. It just takes a little care.
Did I miss anything? Leave a comment below.