Ember.js ObjectProxy 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.
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}} |
Output:
Reference: https://api.emberjs.com/ember/release/classes/ObjectProxy