Open In App

Ember.js CoreObject Class

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:

Properties: The following is the list of the properties of this 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




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




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




{{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




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




{{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}}
/>

Output:

 

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


Article Tags :