Ember.js EmberRouter setProperties() Method
Last Updated :
24 Apr, 2025
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are 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 setProperties() Method of EmberRouter is a method that is used to sets the list of properties at once.
Syntax:
this.object.setProperties( Properties );
Parameters:
- Properties: It is a list of properties to set for an object.
Returns: The passed object.
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
Step 3: To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route test1
app/routes/test1.js
JavaScript
import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
import Ember from 'ember';
import { computed, set } from '@ember/object';
const Person = EmberObject.extend({
fullName: computed('firstName', 'lastName', {
get() {
return `${this.firstName} ${this.lastName}`;
}
}).readOnly()
});
export default class StudentsRoute extends Route {
CreateEmployee() {
let Employee = Person.create({
firstName: '',
lastName: '',
gender: '',
position: '',
Salary: 0,
email: '',
mobile: '',
});
return Employee;
}
setDetails() {
this.employee.setProperties({
'firstName': 'Satyam', 'lastName': 'Sahu',
'gender': 'M', 'position': 'Software Engneer',
'email': '[email protected]', 'mobile': '9382938239',
'Salary': 90000
})
}
model() {
this.employee = this.CreateEmployee();
this.setDetails();
return this.employee;
}
setupController(controller, model) {
super.setupController(controller, model);
controller.set('employee', this.employee);
}
}
app/templates/test1.hbs
HTML
{{page-title "EmberRouter setProperties"}}
<h1>Employee Details:</h1>
<div>Name: {{this.employee.fullName}}</div>
<div>Gender: {{this.employee.gender}}</div>
<div>Position: {{this.employee.position}}</div>
<div>Salary: {{this.employee.Salary}}</div>
<div>Mobile: {{this.employee.mobile}}</div>
<div>Email: {{this.employee.email}}</div>
{{outlet}}
Output:
output1
Example 2: Type the following code to generate the route for this example.
ember generate route test2
app/routes/test2.js
JavaScript
import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
import Ember from 'ember';
import { computed, set } from '@ember/object';
const Student = EmberObject.extend({
Grade: computed('Marks', {
get() {
let m = this.Marks;
return m > 80 ? 'A' : m > 65 ? 'B' :
m > 50 ? 'C' : 'D';
}
}).readOnly()
});
export default class WebsitesRoute extends Route {
students = [
Student.create({
fullName: 'Sam Snehil',
Marks: 72,
class: 11,
}),
Student.create({
fullName: 'Ram Sahu',
Marks: 84,
class: 10,
}),
Student.create({
fullName: 'Soham Verma',
Marks: 69,
class: 12,
}),
Student.create({
fullName: 'David Tigga',
Marks: 53,
class: 9,
}),
Student.create({
fullName: 'Pokhu Verma',
Marks: 95,
class: 10,
}),
Student.create({
fullName: 'Satyam Verma',
Marks: 75,
class: 12,
}),
];
temp;
temp2;
model() {
return this.students;
}
setupController(controller, model) {
super.setupController(controller, model);
controller.set('students', this.students);
controller.set('temp', this.temp);
controller.set('temp2', this.temp2);
}
}
app/controllers/test2.js
JavaScript
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
ChangeMarks(data, data1) {
this.students.forEach(function (item) {
if (item.fullName == data)
item.setProperties({ 'Marks': JSON.parse(data1) });
});
},
},
});
app/templates/test2.hbs
HTML
{{page-title "EmberRouter setProperties"}}
<h3>List of Item in Buckets</h3>
<table>
<tr>
<th> Name </th>
<th>Class </th>
<th>Marks </th>
<th>Grade </th>
</tr>
{{#each @model as |temp|}}
<tr>
<td>{{temp.fullName}}</td>
<td>{{temp.class}}</td>
<td>{{temp.Marks}}</td>
<td>{{temp.Grade}}</td>
</tr>
{{/each}}
</table>
<br />
<div>
<label>Enter Name : </label>
{{input value=this.item}}
</div><br />
<div>
<label>Change Marks : </label>
{{input value=this.item2}}
</div><br />
<input
type="button"
id="Change-Property"
value="Change Marks"
{{action "ChangeMarks" this.item this.item2}}
/>
<br /><br />
{{outlet}}
Output:
output2
Reference: https://api.emberjs.com/ember/4.9/classes/EmberRouter/methods/setProperties?anchor=setProperties