Working with computed properties

In this recipe, we'll take a look at computed properties and how they can be used to display data, even if that data changes as the application is running.

How to do it...

Let's create a new Ember.Object and add a computed property to it:

1. Let's begin by creating a new description computed property. This property will reflect the status of the isOn and color properties:

   const Light = Ember.Object.extend({
     isOn: false,
     color: 'yellow',
   
     description: Ember.computed('isOn','color',function() {
       return 'The ' + this.get('color') + ' light is set to ' + this.get('isOn');
     })
   
   });

2. We can now create a new Light object and get the computed property description:

   const bulb = Light.create();
   bulb.get('description'); //The yellow light is set to false

   The preceding example creates a computed property that depends on the isOn and color properties. When the description function is called, it returns a string describing the state of the light.

   Computed properties will observe changes and dynamically update whenever they occur.

3. To see this in action, we can change the preceding example and set the isOn property to false. Use the following code to accomplish this:

   bulb.set('isOn', true);
   bulb.get('description') //The yellow light is set to true

   The description has been automatically updated and will now display The yellow light is set to true.

Chaining the Light object

Ember provides you with a nice feature that allows computed properties to be present in other computed properties. In the previous example, we created a description property that outputted some basic information about the Light object.

1. Let's add another property that gives a full description:

   const Light = Ember.Object.extend({
     isOn: false,
     color: 'yellow',
     age: null,
   
     description: Ember.computed('isOn','color',function() {
       return 'The ' + this.get('color') + ' light is set to ' + this.get('isOn');
     }),
   
     fullDescription: Ember.computed('description','age',function() {
       return this.get('description') + ' and the age is ' + this.get('age')
     }),
   
   });

2. The fullDescription function returns a string that concatenates the output from the description with a new string that displays age:

   const bulb = Light.create({age:22});
   bulb.get('fullDescription'); //The yellow light is set to false and the age is 22

   In this example, during the instantiation of the Light object, we set the age to 22. We could have overwritten any property if necessary.

Alias

The Ember.computed.alias method allows us to create a property that is an alias for another property or object.

1. Any call to get or set will behave as if the changes were made to the original property:

   const Light = Ember.Object.extend({
     isOn: false,
     color: 'yellow',
     age: null,
     description: Ember.computed('isOn','color',function() {
       return 'The ' + this.get('color') + ' light is set to ' + this.get('isOn');
     }),
     fullDescription: Ember.computed('description','age',function() {
       return this.get('description') + ' and the age is ' + this.get('age')
     }),
    aliasDescription: Ember.computed.alias('fullDescription')
   });
   
   const bulb = Light.create({age: 22});
   bulb.get('aliasDescription');//The yellow light is set to false and the age is 22.

2. The aliasDescription alias will display the same text as fullDescription as it's just an alias of this object. If we made any changes to any properties in the Light object later, the alias would also observe these changes and be computed properly. We'll discuss more about this in the Working with bindings recipe.

How it works...

Computed properties are built on top of the observer pattern. Whenever an observation shows a state change, it recomputes the output. If no changes occur, then the result is cached.

In other words, computed properties are functions that get updated whenever any of their dependent values change. You can use them in much the same way that you would use a static property. They are common and useful throughout Ember and its codebase.

Keep in mind that a computed property will only update if it is in a template or function that is being used. If the function or template is not being called, nothing will occur. This will help with performance.