O'Reilly logo

Ember.js Cookbook by Erik Hanchett

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required