Ember.js ObjectProxy Class

Last Updated : 29 Jan, 2023

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.

ObjectProxy Class: The ObjectProxy is a proxy object class in Ember.js. All properties not defined by the proxy itself are forwarded to a proxied content object via ObjectProxy.

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
content: This property is used to forward the object property.
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, I am going to demonstrate the use of the get function.

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

ember generate route students

app/routes/students.js

Javascript

import Route from '@ember/routing/route'; 
import EmberObject from '@ember/object'; 
  
export default class StudentsRoute extends Route { 
    students = [ 
        EmberObject.create({ name: 'Rahul', 
            Class: 11, marks: 75 }), 
        EmberObject.create({ name: 'Sam', 
            Class: 12, marks: 59 }), 
        EmberObject.create({ name: 'David', 
            Class: 11, marks: 67 }), 
        EmberObject.create({ name: 'Druv', 
            Class: 12, marks: 44 }), 
        EmberObject.create({ name: 'Mahan', 
            Class: 12, marks: 87 }), 
        EmberObject.create({ name: 'Ram', 
            Class: 11, marks: 71 }), 
        EmberObject.create({ name: 'Dadu', 
            Class: 12, marks: 58 }) 
    ]; 
    model() { 
        return this.students; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('students', this.students); 
    } 
} 

app/controllers/students.js

Javascript

import Ember from "ember"; 
import { isAny, isEvery } from "@ember/array"; 
  
export default Ember.Controller.extend({ 
    actions: { 
        increase(data) { 
            this.students.forEach((item) => 
                item.incrementProperty('marks', 
                JSON.parse(data))); 
        }, 
        decrease(data) { 
            this.students.forEach((item) => 
                item.decrementProperty('marks', 
                JSON.parse(data))); 
        }, 
        remove(item) { 
            this.students.set('[]', this.students.without 
                (this.students.findBy('name', item))); 
        }, 
        show_first() { 
            let ans = this.students.get('firstObject'); 
            alert(ans.name) 
        }, 
        show_last() { 
            let ans = this.students.get('lastObject'); 
            alert(ans.name) 
        }, 
    }, 
}); 

app/template/students.hbs

HTML

{{page-title "get"}} 
<h3>Students List: </h3> 
<table> 
    <tr> 
        <th>Name</th> 
        <th>Class</th> 
            <th>Marks</th> 
    </tr> 
    {{#each @model as |detail|}} 
        <tr> 
            <td>{{detail.name}}</td> 
            <td>{{detail.Class}}</td> 
            <td>{{detail.marks}}</td> 
        </tr> 
    {{/each}} 
</table> 
<br /> 
<div> 
    <label>Enter value: </label> 
    {{input value=this.item}} 
</div> 
<input
    type="button"
    id="increase-marks"
    value="Increase All marks by Value"
    {{action "increase" this.item}} 
/> 
<br /><br /> 
<div> 
    <label>Enter value: </label> 
    {{input value=this.item2}} 
</div> 
<input
    type="button"
    id="decrease-marks"
    value="decrease All marks by Value"
    {{action "decrease" this.item2}} 
/> 
<br /><br /> 
<div> 
    <label>Enter Name: </label> 
    {{input value=this.item3}} 
</div> 
<input
    type="button"
    id="remove-student"
    value="Remove Student"
    {{action "remove" this.item3}} 
/> 
<br /><br /> 
<input
    type="button"
    id="first-student"
    value="Show First Student in list"
    {{action "show_first"}} 
/> 
<br /><br /> 
<input
    type="button"
    id="last-student"
    value="Show Last Student in list"
    {{action "show_last"}} 
/> 
{{outlet}} 

Output:

Example 2: In this example, we are going to take a look at the incrementProperty and decrementProperty methods.

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 "incrementProperty"}} 
<h3>List of Item in Buckets</h3> 
<table> 
    <tr> 
        <th>Food Name </th> 
        <th>Bucket </th> 
        <th>Fruit </th> 
    </tr> 
    {{#each this.food as |f|}} 
        <tr> 
            <td>{{f.food}}</td> 
            <td>{{f.quant}}</td> 
            <td>{{f.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 of 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}} 