Understanding the Ember object model

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.

Declaring types (classes) and instances

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);
});

Accessing and mutating properties

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");

Computed properties

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.

Property observers

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.

Note

Computed properties can also be observed. However, the observer method will not be triggered until the computed property is accessed, even if the dependent properties are updated.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset