Ember.js Cookbook

Passing properties to a component

Components by default are isolated from their surroundings. Any data that the component needs must be passed in. In this recipe, we'll create a student list. However, we will pass data to the component to be rendered.

How to do it...

1. In a new application, generate a new component and the application route:

   $ ember g route application
   $ ember g component student-list
   

   This will generate the application.js file in the routes folder and the files necessary from the student-list component.

2. Edit the application.js file in the app/routes folder:

   // app/routes/application.js
   import Ember from 'ember';
   
   export default Ember.Route.extend({
       model() {
         return ['Jim','Jeff','Jill']
       }
   });

   This model will return a simple array.

3. Update ...