Ember.js Cookbook

Implementing actions in components

Components can communicate changes with actions. These actions can be sent back to the parent or be handled in the component. Let's take a look at a few recipes that show this.

How to do it...

In this recipe, we'll create a student list that we will then manipulate.

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

   $ ember g component student-list
   

   This will generate the student-list component and the necessary files.

2. Update the student-list.js file in the app/components folder. We'll need to create a few actions and a new array:

   // app/components/student-list.js import Ember from 'ember'; export default Ember.Component.extend({ init() { this._super(...arguments); this.setup(); }, actions: { remove(){ this.get('listOfStudents').popObject(); ...