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.
Let's create a new Ember.Object and add a computed property to it:
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'); }) });
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.
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
.
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.
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') }), });
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.
The Ember.computed.alias
method allows us to create a property that is an alias for another property or object.
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.
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.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.