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 get() method is used to Dynamically loop up a property on an object or an element in an array.
Syntax:
{{ get this.array propertyName }}
Parameters:
- this.array: It is the array whose value we want to loop up.
- propertyName: It is the name of the property that we want.
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 get1
app/components/compact.js
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
import { action } from '@ember/object' ;
export default class extends Component {
student = [{
"name" : "Sam Snehil" ,
"age" : 21
},
{
"name" : "Satyam Sahu" ,
"age" : 23
},
{
"name" : "Sohan Argrwal" ,
"age" : 25
},
{
"name" : "Sreya Sarma" ,
"age" : 19
}];
print(item) {
let ans = ''
item.map((student) => ans += student.name + ` is ` +
student.age + ' year old ' + '\n' )
alert(ans);
}
} |
app/components/compact.hbs
{{yield}} < table >
< tr >
< th >Name</ th >
< th >Class</ th >
</ tr >
{{#each this.student as |detail|}}
< tr >
< td >{{get detail 'name'}}</ td >
< td >{{get detail 'age'}}</ td >
</ tr >
{{/each}}
</ table >
< br />
< input type = "button"
id = "set-code"
value = "Introduction of Each Student"
{{on 'click' (fn this.print this.student)}}/>
|
app/templates/get1.hbs
< Compact >
< h1 >
List of Student :
</ h1 >
</ Compact >
{{outlet}} |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route get2
app/controllers/compact2.js
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
import { action } from '@ember/object' ;
export default class extends Component {
food = [{
"food" : "Banana" ,
"Quant" : 5
},
{
"food" : "Pine-apple" ,
"Quant" : 2
},
{
"food" : "Apple" ,
"Quant" : 7
},
{
"food" : "Mango" ,
"Quant" : 4
}];
@tracked Student1 = {
name: 'Satyam' ,
language: 'Python'
};
@tracked data = {
name: "Aayush" ,
language: 'JavaScript'
}
flip(temp) {
let k = this .Student1;
this .Student1 = temp;
this .data = k;
}
} |
app/component/compact2.hbs
< h1 >
{{get this.Student1 'name'}} have skill
in {{get this.Student1 'language'}}
</ h1 >
< input type = "button"
id = "set-code"
value = "Change Student"
{{action 'flip' this.data}}/> |
app/templates/get2.hbs
< Compact2 >
</ Compact2 >
{{outlet}} |
Output:
Reference: https://api.emberjs.com/ember/4.4/classes/Ember.Templates.helpers/methods/fn?anchor=get