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