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.
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 theroutes
folder and the files necessary from thestudent-list
component.Edit the
application.js
file in theapp/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.
Update the
student-list
template in theapp/templates/components
folder:// app/templates/components/student-info.hbs {{#each compModel as |student|}} {{student}}<br> {{/each}}
This will take the
compModel
property and iterate over...