Ember.js Service get() Method
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 obtain a properties value from the object.
Syntax:
get(key)
Parameters:
- key: The property to retrieve.
Returns: The value or undefined if the key doesn’t exist.
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 serve
Example 1: Type the following code to generate the route for this example:
ember generate route students
app/controllers/students.js
Javascript
import Ember from 'ember' ; export default Ember.Controller.extend({ name: 'Alix Mainston' , gender: 'F' , class: 9, grade: 'B' , pocket_money: 9643, actions: { getName() { let n = this .get( 'name' ); alert(n); }, getOtherDetails() { let res = this .getProperties( [ 'gender' , 'class' , 'grade' ]); console.log(res); let str = `${res.gender}, ${res.class} and ${res.grade}`; alert(str); }, increasePocketMoney() { this .incrementProperty( 'pocket_money' , 1000); }, decreasePocketMoney() { this .decrementProperty( 'pocket_money' , 1000); }, }, }); |
app/template/students.hbs
HTML
{{page-title "Students"}} < h1 >Details:</ h1 > < div >Name: {{this.name}}</ div > < div >Gender: {{this.gender}}</ div > < div >Class: {{this.class}}</ div > < div >Grade: {{this.grade}}</ div > < div >Pocket Money: {{this.pocket_money}}</ div > < br />< br /> < input type = "button" id = "get-name" value = "Get Name" {{action "getName"}} /> < br />< br /> < input type = "button" id = "get-other-details" value = "Get Other Details" {{action "getOtherDetails"}} /> < br />< br /> < input type = "button" id = "increase-pocket-money" value = "Increase Pocket Money" {{action "increasePocketMoney"}} /> < br />< br /> < input type = "button" id = "decrease-pocket-money" value = "Decrease Pocket Money" {{action "decreasePocketMoney"}} /> {{outlet}} |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route details
app/controllers/details.js
Javascript
import Ember from 'ember' ; import { any, slice, reverseObjects, rejectBy } from '@ember/array' ; export default Ember.Controller.extend({ name: 'Anubhav' , mobile: '1298119967' , age: 20, salary: 10000, city: 'Patna' , country: 'India' , gender: 'M' , zipCode: '800020' , actions: { getName() { let n = this .get( 'name' ); alert(n); }, getMobile() { let res = this .getProperties([ 'mobile' ]); console.log(res); alert(res.mobile); }, increaseSalary() { this .incrementProperty( 'salary' , 1000); }, decreaseSalary() { this .decrementProperty( 'salary' , 1000); }, }, }); |
app/template/details.hbs
HTML
{{page-title "Details"}} < div >{{this.name}}</ div > < div >{{this.age}}</ div > < div >{{this.salary}}</ div > < div >{{this.zipCode}}</ div > < br />< br /> < input type = "button" id = "get-name" value = "Get Name" {{action "getName"}} /> < br />< br /> < input type = "button" id = "get-mobile" value = "Get Mobile" {{action "getMobile"}} /> < br />< br /> < input type = "button" id = "increase-salary" value = "Increase Salary" {{action "increaseSalary"}} /> < br />< br /> < input type = "button" id = "decrease-salary" value = "Decrease Salary" {{action "decreaseSalary"}} /> < br />< br /> {{outlet}} |
Output:
Reference: https://api.emberjs.com/ember/4.7/classes/Service/methods/