Ember.js EmberObject Class

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.

EmberObject Class: It is the primary foundation class for all Ember objects. It is a CoreObject subclass with the Observable mixin added.

Methods: The following is the list of methods for this class:

• addObserver: This method is used to register an observer for a property.
• cacheFor: This method is used to get the cached value for an already computed property if it exists.
• decrementProperty: This method is used to set the value of the property to the current value minus some amount.
• destroy: This method destroys an object by setting the isDestroyed flag and deleting its metadata.
• get: This method is used to retrieve the value of a property from the object.
• getProperties: This method is used to get the value of multiple properties at once.
• incrementProperty: This method is used to set the value of the property to the current value plus some amount.
• init: This  method is called when objects are instantiated.
• notifyPropertyChange: This method alerts the observer system that a property change has taken place.
• removeObserver: This method removes any observers you have registered earlier for this object.
• set: This method is used to set the key and value to the object.
• setProperties: This method sets a number of properties at once.
• toString: This method is to get the string representation of the object. 
• toggleProperty: This method is used to set the value of the boolean property to the opposite of its current value.
• willDestroy: This method tears down the object.

Properties: The following is the list of the properties of this class:

• concatenatedProperties: This property specifies the characteristics from the superclass that will be concatenated
• isDestroyed: This property is the destroy complete flag.
• isDestroying: This property is the destroy scheduled flag.
• mergedProperties: This property helps to merge the value of the subclass property’s value with the superclass property value of the ember class.

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: In this example we are going to take a look at the toggleProperty method.

Type the following code to generate the route for this example:

ember generate route fruits

app/routes/fruits.js

Javascript

import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
import { } from '@ember/array';

export default class FruitsRoute extends Route {
    fruits = [
        EmberObject.create({ name: 'Lady Finger',
            isFruit: false, color: 'green' }),
        EmberObject.create({ name: 'Brinjal',
            isFruit: false, color: 'purple' }),
        EmberObject.create({ name: 'Apple',
            isFruit: true, color: 'red' }),
        EmberObject.create({ name: 'Grapes',
            isFruit: true, color: 'green' }),
        EmberObject.create({ name: 'Mango',
            isFruit: true, color: 'yellow' }),
        EmberObject.create({ name: 'Watermelon',
            isFruit: true, color: 'red' }),
        EmberObject.create({ name: 'Orange',
            isFruit: true, color: 'orange' })
    ];
    fruits2 = [
        EmberObject.create({ name: 'Potato',
            isFruit: false, color: 'brown' }),
        EmberObject.create({ name: 'Tomato',
            isFruit: false, color: 'red' }),
        EmberObject.create({ name: 'Banana',
            isFruit: true, color: 'Yellow' }),
        EmberObject.create({ name: 'Water-melon',
            isFruit: true, color: 'green' }),
        EmberObject.create({ name: 'Papaya',
            isFruit: true, color: 'yellow' }),
    ];
    model() {
        return this.fruits;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('fruits', this.fruits);
        controller.set('fruits2', this.fruits2);
    }
}

app/controllers/fruits.js

Javascript

import Ember from "ember";
import { isAny, isEvery } from "@ember/array";

export default Ember.Controller.extend({
    actions: {
        print() {
            let ans = '';
            this.fruits.forEach((item) => ans +=
                item.getProperties('name').name + '\n');
            alert(ans);
        },
        Change() {
            let ans = this.fruits.forEach((item, i) =>
                item.setProperties(this.fruits2.at(i)));
        },
        toggle() {
            this.fruits.forEach((item) =>
                item.toggleProperty('isFruit'));
        },
    },
});

app/template/fruits.hbs

HTML

{{page-title "toggleProperty"}}
<h3>Here is a list of eatables: </h3>
<br /><table>
    <tr>
        <th>Name</th>
        <th>isFruit</th>
        <th>color</th>
    </tr>
    {{#each @model as |detail|}}
    <tr>
        <td>{{detail.name}}</td>
        <td>{{detail.isFruit}}</td>
        <td>{{detail.color}}</td>
    </tr>
    {{/each}}
</table>
<br />
<input type="button"
    id="list-item"
    value="List all Items"
    {{action "print"}} />
<br /><br />
<input
    type="button"
    id="change-item"
    value="Change all Item in Bucket"
    {{action "Change"}}
/>
<br /><br />
<input
    type="button"
    id="toggle-isFruits"
    value="Toggle isFruit Properties"
    {{action "toggle"}}
/>
{{outlet}}

Output:

Example 2: In this example we are going to take a look at the setproperties and toString methods.

Type the following code to generate the route for this example:

ember generate route details

app/routes/details.js

Javascript

import Route from '@ember/routing/route';
import EmberObject from '@ember/object';

const Person = EmberObject.extend({
    toStringExtension() {
        return this.get('name');
    }
});

export default class DetailsRoute extends Route {
    person;
    createPerson() {
        let person = Person.create({
            name: 'Anubhav',
            mobile: '1298119967',
            age: 20,
            salary: 10000,
            city: 'Patna',
            country: 'India',
            gender: 'M',
            zipCode: '800020',
        });
        return person;
    }
    changeDetails(person) {
        person.setProperties({
            age: 51,
            country: 'England',
        });
    }
    model() {
        this.person = this.createPerson();
        this.changeDetails(this.person);
        return this.person;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('person', this.person);
    }
}

app/controllers/details.js

Javascript

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        clickButton() {
            alert(this.person.toString());
        }
    },
});

app/template/details.hbs

HTML

{{page-title "Details"}}
<h1>Person</h1>
<div>Name: {{this.person.name}}</div>
<div>Age: {{this.person.age}}</div>
<div>Salary: {{this.person.salary}}</div>
<div>Gender: {{this.person.gender}}</div>
<div>Zip Code: {{this.person.zipCode}}</div>
<div>Country: {{this.person.country}}</div>
<div>Mobile: {{this.person.mobile}}</div>
<br/><br/>
<input type="button" id="click"
    value="Click Here!" {{action 'clickButton'}}/>
{{outlet}}

Output:

Reference: https://api.emberjs.com/ember/release/classes/EmberObject