Ember comes with a rich API out-of-the-box, extending vanilla JavaScript classes and introducing new structures, providing enhanced capabilities such as two-way data binding, property observation, and so on. It provides smarter replacements for most of the common JavaScript constructs such as objects and arrays.
Ember.Object
is the main base class of all Ember objects. It provides a class system with advanced features such as mixins and constructor methods. Ember.Object
provides many special features, such as computed properties, data binding, and property-value change observers.
You can inherit all the features of Ember.Object
in your objects; just extend it in a purely object-oriented fashion, as given in the following code:
var User = Ember.Object.extend({ ... });
The preceding snippet is just a declaration of the User
type. Now, you need to instantiate this class structure in order to use it in your program, as follows:
var User = Ember.Object.create();
You can either call a no args constructor like the preceding snippet, or you can pass a set of attributes with values as a JS object in order to create an instance of a declared class, as follows:
var myUser = User.create({ firstName: "John", lastName: "Smith", userName: "jsmith", password: "secretp@ss", dateOfBirth: new Date(1980, 10, 24); });
Once the type is initialized, you can access its properties using a get
method, as follows:
var name = myUser.get("name");
Remember to always use the get
method instead of object.property
, since Ember objects store managed properties in a different hash, which provides a few special features, unlike a vanilla JS object.
Make sure you use the set
method for enabling all the special features of Ember objects, such as computed properties and property observation:
myUser.set('firstName', "Shameer");
A computed property is a virtual property derived from other normal properties, or it is a value returned by a function. Ember.Object
can have computed properties too, as shown here:
var User = Ember.Object.extend({ ... fullName: Ember.computed('firstName', 'lastName', function() { return `${this.get('firstName')} ${this.get('lastName')}`; }), ... });
Once instantiated, you can access computed properties as well in the same manner as normal properties. They update themselves whenever a dependent property changes. You can create mutable computable properties too. The following is an example of a sensible implementation of such a computed property:
fullName: Ember.computed('firstName', 'lastName', { get(key) { return `${this.get('firstName')} ${this.get('lastName')}`; }, set(key, value) { var [firstName, lastName] = value.split(/s+/); this.set('firstName', firstName); this.set('lastName', lastName); return value; } })
Since the computed property is like any other function, you can add any business logic to it.
You can observe normal or computed properties for any change in value. Register the property with Ember.Observer
for this purpose. See the following example:
var User = Ember.Object.extend({ ... dateOfBirth: new Date(), dobChanged: Ember.observer('dateOfBirth', function() { // deal with the change console.log(`Date of birth updated. New value is: ${this.get('dateOfBirth')}`); }) });
In the preceding snippet, the dobChanged
function will fire whenever the dateOfBirth
property gets updated. You can bind multiple properties with a single observer method by passing all the properties as arguments into the Ember.observer
method prior to the function definition.