Ember.js Ember.Templates.helpers each() Method
Last Updated :
08 Dec, 2022
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The each is used to loop over elements in a collection.
Syntax:
{{ #each Collection as |alias| }}
Parameters:
- Collection: It is the name of the collection on which we iterate.
Steps to Install and Run Ember.js:
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember server
Example 1: Type the following code to generate the route for this example:
ember generate route each1
app/routes/each1.js
Javascript
import Route from '@ember/routing/route' ;
export default class PartyRoute extends Route {
person = [
'Aman' ,
'Arabh' ,
'Sonu' ,
'Saurabh' ,
'Satyam' ,
];
item;
idx;
len;
model() {
return this .person;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( 'person' , this .person);
controller.set( 'item' , this .item);
controller.set( 'idx' , this .idx);
controller.set( 'len' , this .len);
}
}
|
app/components/compact.hbs
HTML
{{@greet}} to GeeksforGeeks site< br />
|
app/templates/each1.hbs
HTML
{{#each @model as |temp|}}
{{compact greet=(concat "Welcome " temp)}}
{{/each}}
|
Output:
Ember.js Ember.Templates.helpers each() Method
Example 2: Type the following code to generate the route for this example:
ember generate route each2
app/routes/each2.js
Javascript
import Route from '@ember/routing/route' ;
export default class WebsitesRoute extends Route {
student = [
{
FName: 'Arbha ' ,
LName: 'Singh' ,
},
{
FName: 'Sam ' ,
LName: 'Snehil' ,
},
{
FName: 'Pokhu ' ,
LName: 'Agrawal' ,
},
{
FName: 'Yogi ' ,
LName: 'Sahu' ,
},
];
temp;
model() {
return this .student;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( 'student' , this .student);
controller.set( 'temp' , this .temp);
controller.set( 'temp2' , this .temp2);
}
}
|
app/components/compact2.hbs
app/templates/each2.hbs
HTML
< h1 >List of Students : </ h1 >
{{#each this.student as |stu| }}
{{compact2 name=(concat stu.FName stu.LName)}}
{{/each}}
|
Output:
Ember.js Ember.Templates.helpers each() Method
Reference: https://api.emberjs.com/ember/4.4/classes/Ember.Templates.helpers/methods/concat?anchor=each
Share your thoughts in the comments
Please Login to comment...