Blueprint
Search…
Computed Properties
How to use computed properties in the object model
Overview
Computed properties are properties derived from the value of one or more properties on the current instance. For example, the
fullName property on the Person class is defined as a method. But, we could define it as a property based on the firstName and lastName property. Unlike methods, computed properties are accessed like any other data property defined on the class itself. Likewise, computed properties can optionally be iterated over.
Types of Computed Properties
We support the following types of computed properties:
Read-Write Properties
Read-write properties are defined using the
computed() method, and passing it an initialization hash. The should have a getter method, and an optional setter method. Let's see how we can redefine our Person class using computed properties.person.js
1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
fullName: computed ({
5
set (value) {
6
[this.firstName, this.lastName] = value.split (' ');
7
}
8
9
get () {
10
return `${this.firstName} ${this.lastName}`;
11
}
12
});
Copied!
Use the
computed() method to define computed property on the class definition. We can then just use the computed property like any other data property.
1
let person = new Person ({firstName: 'Bill', lastName: 'Clinton'});
2
console.log (person.fullName); // "Bill Clinton"
3
4
person.fullName = 'Ronald Reagan';
5
console.log (person.fullName); // "Ronald Reagan"
Copied!
Read-Only Properties
Read-only properties are defined in a similar manner as read-write properties. The main difference read-only properties do not have a
set method on its computed property definition.1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
fullName: computed ({
5
set (value) {
6
[this.firstName, this.lastName] = value.split (' ');
7
}
8
});
Copied!
Now, anytime we set the
fullName property, it will not change.1
let person = new Person ({firstName: 'Bill', lastName: 'Clinton'});
2
console.log (person.fullName); // "Bill Clinton"
3
4
person.fullName = 'Ronald Reagan';
5
console.log (person.fullName); // "Bill Clinton"
Copied!
Constant Properties
Constant properties are computed properties that do not change. The behavior of a constant property is therefore similar to that of read-only properties. The main difference is the constant properties are not computed at run-time. Instead, you must provide its value when you are defining the property.
Here is an example of defining a constant property named
MINIMUM_AGE on the Person class.person.js
1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
/// ...
5
MINIMUM_AGE: computed.constant (21)
6
});
Copied!
Enumerable Computed Properties
When you enumerate the properties of an object, computed properties are not included in the enumeration. To enable enumeration of computed properties, add the
enumerable property to the computed property descriptor.1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
fullName: computed ({
5
enumerable: true, // the property can be enumerated
6
get () { return `${this.firstName} ${this.lastName}`; }
7
set (value) { [this.firstName, this.lastName] = value.split (' '); }
8
});
Copied!
1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
/// ...
5
MINIMUM_AGE: computed.constant (21, {enumerable: true})
6
});
Copied!
Now, the computed properties will appear when the properties of the parent object are enumerated.
Configurable Computed Properties
By default, computed properties are not configurable. This means that once a property is defined on a object, it cannot be redefined. For example, neither an extended class cannot change the property definition, nor an object instance during initialization time.
To change this behavior, use the
configurable property on the property descriptor.1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
fullName: computed ({
5
configurable: true, // the property is configurable
6
get () { return `${this.firstName} ${this.lastName}`; }
7
set (value) { [this.firstName, this.lastName] = value.split (' '); }
8
});
Copied!
1
const { BO, computed } = require ('@onehilltech/blueprint');
2
3
const Person = BO.extend ({
4
/// ...
5
MINIMUM_AGE: computed.constant (21, {configurable: true})
6
});
Copied!
Now, you can redefine the property in extended classes and during object initialization.
Last modified 4yr ago