Often, you'll have a list of items that you'll need to iterate over. We can iterate through these items with the each
helper. This recipe will go over how to do this.
Let's say that we have a list of students and want to display them in our template. We'll use the each
helper to accomplish this.
In a new project, generate
student
controller
andtemplate
:$ ember g template student $ ember g controller student
This will create the necessary files needed for our example.
Update the
router.js
file with the newstudent
route:// app/router.js … Router.map(function() { this.route('student'); });
This will add a new
conditional
route. To access this route using the Ember server, open a web browser and navigate tohttp://localhost:4200/student
.Update our student controller with an array of
students
as a property:// app/controllers/students.js import Ember from 'ember'; export default Ember.Controller.extend({ students: [ {name: 'Erik'}, {name: 'Jim'}, ...