Ember.js EmberRouter setProperties() Method

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': 'yogesh@gmail.com', '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