Ember.js CoreObject Class

Last Updated : 27 Jan, 2023

Ember.js is an open-source JavaScript framework used for developing large client-side web applications 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 many websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.

CoreObject Class: The CoreObject class is the foundation class for all Ember constructions. It creates a class system based on the Mixin system used by Ember and serves as the framework for the Ember Object Model.

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

destroy: This method destroys an object by setting the isDestroyed flag and deleting its metadata.
init: This method is called when objects are instantiated.
toString: This method is to get the string representation of the object.
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.

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

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

ember generate route foods

app/routes/foods.js

Javascript

import Route from '@ember/routing/route';
import EmberObject from '@ember/object';
 
export default class FoodsRoute extends Route {
 
    temp;
    model() {
        return 'Increment Property';
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('temp', this.temp);
        controller.set('temp2', this.temp2);
    }
}

app/controllers/foods.js

Javascript

import Ember from 'ember';
import EmberObject from '@ember/object';
 
const Food = EmberObject.extend({
    toStringExtension() {
        return this.get('food');
    }
});
export default Ember.Controller.extend({
    value: 0,
    food: [
        Food.create({
            food: 'apple',
            isFruit: true,
            quant: '1',
        }),
        Food.create({
            food: 'Potato',
            isFruit: false,
            quant: '2',
        }),
        Food.create({
            food: 'Banana',
            isFruit: true,
            quant: '1',
        }),
        Food.create({
            food: 'Burgur',
            isFruit: false,
            quant: '2',
        }),
        Food.create({
            food: 'Orange',
            isFruit: true,
            quant: '1',
        }),
        Food.create({
            food: 'sandwitch',
            isFruit: false,
            quant: '2',
        }),
        Food.create({
            food: 'bean',
            isFruit: false,
            quant: '2',
        }),
    ],
    actions: {
        older() {
            this.incrementProperty('value');
        },
        younger() {
            this.decrementProperty('value');
        },
 
        addItem(data, data1, data2) {
 
            let temp = Food.create({
                food: data,
                isFruit: data1,
                quant: data2
            });
            alert(temp.toString() + ' Created');
            this.food.addObject(temp);
        }
    }
});

app/template/foods.hbs

HTML

{{page-title "toString"}}
<h3>List of Item in Buckets</h3>
<table>
    <tr>
        <th> Food Name </th>
        <th>Bucket </th>
        <th>Fruit </th>
    </tr>
    {{#each this.food as |website|}}
        <tr>
            <td>{{website.food}}</td>
            <td>{{website.quant}}</td>
            <td>{{website.isFruit}}</td>
        </tr>
    {{/each}}
</table>
<br /><br />
<div>
    <label>Enter Item Name: </label>
    {{input value=this.temp2}}
</div>
<br />
<div>
    <label>Enter Quantity in Kg: </label>
    {{input value=this.value}}
</div>
<input
    type="button" id="increase"
    value="+" {{action "older"}} />
<input
    type="button" id="decrease"
    value="-" {{action "younger"}} />
<br />
<br />
<div>
    <label>Item is fruit or not : </label>
    {{input value=this.temp}}
</div>
<br /><br />
<input
    type="button"
    id="all-Fruits"
    value="Add item"
    {{action "addItem" this.temp2 this.value this.temp}}
/>
{{outlet}}

Output:

Example 2: In this example, we are going to take a look at the init method.

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

ember generate route students

app/routes/students.js

Javascript

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import Ember from 'ember';
 
let Student = Ember.Object.extend({
    // these will be supplied by `create`
    firstName: null,
    lastName: null,
 
    init() {
        alert(`${this.get('firstName')} is Listed`);
    },
    fullName: Ember.computed('firstName', 'lastName', function () {
        return `${this.firstName} ${this.lastName}`;
    }),
 
    Changed: Ember.observer('fullName', function () {
        console.log(`fullName changed to: ${this.fullName}`);
    }),
});
 
export default Ember.Component.extend({
    students: [
        Student.create({
            firstName: 'Balit',
            lastName: 'stark',
            Id: 'stu2',
        }),
        Student.create({
            firstName: 'Permu',
            lastName: 'scott',
            Id: 'stu0',
        }),
        Student.create({
            firstName: 'Sam',
            lastName: 'melo',
            Id: 'stu1',
        }),
        Student.create({
            firstName: 'Pokhu',
            lastName: 'Verma',
            Id: 'stu3',
        }),
        Student.create({
            firstName: 'Tanu',
            lastName: 'Agrawal',
            Id: 'stu4',
        }),
        Student.create({
            firstName: 'Arabh',
            lastName: 'Singh',
            Id: 'stu5',
        })],
@tracked
item3: 'Gulshan',
@tracked
item2: 'Verma',
@tracked
item1: 'stu6',
 
@action
print(data1, data2, data3) {
    let temp = Student.create({
        firstName: data1,
        lastName: data2,
        Id: data3
    });
    this.students.addObject(temp);
}
})

app/template/students.hbs

HTML

{{yield}}
<table>
    <tr>
        <th>Name</th>
        <th>Id</th>
    </tr>
    {{#each this.students as |detail|}}
        <tr>
            <td>{{detail.fullName}}</td>
            <td>{{get detail "Id"}}</td>
        </tr>
    {{/each}}
</table>
<br />
<div>
    <label>Enter Student FirstName: </label>
    {{input value=this.item3}}
</div>
<br />
<div>
    <label>Enter Student LastName: </label>
    {{input value=this.item2}}
</div>
<br />
<div>
    <label>Enter Student Id: </label>
    {{input value=this.item1}}
</div>
<br />
<input
    type="button"
    id="set-code"
    value="Update Student details"
    {{action "print" this.item3 this.item2 this.item1}}
/>