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(); ...

Get Ember.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.