Ember.js Cookbook

Using events in components

When creating components, you can attach events to them. Let's take a look at an example of this.

How to do it...

1. In a new project, generate a new component called student-info:

   $ ember g component student-info
   

   This will generate a component file in the component directory and the templates/components folder.

2. Edit the app/components/student-info.js file. Add a new click event:

   // app/components/student-info.js
   import Ember from 'ember';
   
   const {$}=  Ember
   export default Ember.Component.extend({
       click() {
         $('html').fadeToggle( 'slow', 'linear');
         $('html').delay(250).fadeIn();
       }
   });

   The first thing that you'll notice in this example is that we are using the ES2015 destructuring assignment. The destructuring assignment syntax ...