ember-source
Version:
A JavaScript framework for creating ambitious web applications
394 lines (322 loc) • 15.8 kB
TypeScript
declare module '@ember/object/observable' {
/**
@module @ember/object/observable
*/
import Mixin from "@ember/object/mixin";
export type ObserverMethod<Target, Sender> = keyof Target | ((this: Target, sender: Sender, key: string, value: any, rev: number) => void);
/**
## Overview
This mixin provides properties and property observing functionality, core
features of the Ember object model.
Properties and observers allow one object to observe changes to a
property on another object. This is one of the fundamental ways that
models, controllers and views communicate with each other in an Ember
application.
Any object that has this mixin applied can be used in observer
operations. That includes `EmberObject` and most objects you will
interact with as you write your Ember application.
Note that you will not generally apply this mixin to classes yourself,
but you will use the features provided by this module frequently, so it
is important to understand how to use it.
## Using `get()` and `set()`
Because of Ember's support for bindings and observers, you will always
access properties using the get method, and set properties using the
set method. This allows the observing objects to be notified and
computed properties to be handled properly.
More documentation about `get` and `set` are below.
## Observing Property Changes
You typically observe property changes simply by using the `observer`
function in classes that you write.
For example:
```javascript
import { observer } from '@ember/object';
import EmberObject from '@ember/object';
EmberObject.extend({
valueObserver: observer('value', function(sender, key, value, rev) {
// Executes whenever the "value" property changes
// See the addObserver method for more information about the callback arguments
})
});
```
Although this is the most common way to add an observer, this capability
is actually built into the `EmberObject` class on top of two methods
defined in this mixin: `addObserver` and `removeObserver`. You can use
these two methods to add and remove observers yourself if you need to
do so at runtime.
To add an observer for a property, call:
```javascript
object.addObserver('propertyKey', targetObject, targetAction)
```
This will call the `targetAction` method on the `targetObject` whenever
the value of the `propertyKey` changes.
Note that if `propertyKey` is a computed property, the observer will be
called when any of the property dependencies are changed, even if the
resulting value of the computed property is unchanged. This is necessary
because computed properties are not computed until `get` is called.
@class Observable
@public
*/
interface Observable {
/**
Retrieves the value of a property from the object.
This method is usually similar to using `object[keyName]` or `object.keyName`,
however it supports both computed properties and the unknownProperty
handler.
Because `get` unifies the syntax for accessing all these kinds
of properties, it can make many refactorings easier, such as replacing a
simple property with a computed property, or vice versa.
### Computed Properties
Computed properties are methods defined with the `property` modifier
declared at the end, such as:
```javascript
import { computed } from '@ember/object';
fullName: computed('firstName', 'lastName', function() {
return this.get('firstName') + ' ' + this.get('lastName');
})
```
When you call `get` on a computed property, the function will be
called and the return value will be returned instead of the function
itself.
### Unknown Properties
Likewise, if you try to call `get` on a property whose value is
`undefined`, the `unknownProperty()` method will be called on the object.
If this method returns any value other than `undefined`, it will be returned
instead. This allows you to implement "virtual" properties that are
not defined upfront.
@method get
@param {String} keyName The property to retrieve
@return {Object} The property value or undefined.
@public
*/
get<K extends keyof this>(key: K): this[K];
get(key: string): unknown;
/**
To get the values of multiple properties at once, call `getProperties`
with a list of strings or an array:
```javascript
record.getProperties('firstName', 'lastName', 'zipCode');
// { firstName: 'John', lastName: 'Doe', zipCode: '10011' }
```
is equivalent to:
```javascript
record.getProperties(['firstName', 'lastName', 'zipCode']);
// { firstName: 'John', lastName: 'Doe', zipCode: '10011' }
```
@method getProperties
@param {String...|Array} list of keys to get
@return {Object}
@public
*/
getProperties<L extends Array<keyof this>>(list: L): {
[Key in L[number]]: this[Key];
};
getProperties<L extends Array<keyof this>>(...list: L): {
[Key in L[number]]: this[Key];
};
getProperties<L extends string[]>(list: L): {
[Key in L[number]]: unknown;
};
getProperties<L extends string[]>(...list: L): {
[Key in L[number]]: unknown;
};
/**
Sets the provided key or path to the value.
```javascript
record.set("key", value);
```
This method is generally very similar to calling `object["key"] = value` or
`object.key = value`, except that it provides support for computed
properties, the `setUnknownProperty()` method and property observers.
### Computed Properties
If you try to set a value on a key that has a computed property handler
defined (see the `get()` method for an example), then `set()` will call
that method, passing both the value and key instead of simply changing
the value itself. This is useful for those times when you need to
implement a property that is composed of one or more member
properties.
### Unknown Properties
If you try to set a value on a key that is undefined in the target
object, then the `setUnknownProperty()` handler will be called instead. This
gives you an opportunity to implement complex "virtual" properties that
are not predefined on the object. If `setUnknownProperty()` returns
undefined, then `set()` will simply set the value on the object.
### Property Observers
In addition to changing the property, `set()` will also register a property
change with the object. Unless you have placed this call inside of a
`beginPropertyChanges()` and `endPropertyChanges(),` any "local" observers
(i.e. observer methods declared on the same object), will be called
immediately. Any "remote" observers (i.e. observer methods declared on
another object) will be placed in a queue and called at a later time in a
coalesced manner.
@method set
@param {String} keyName The property to set
@param {Object} value The value to set or `null`.
@return {Object} The passed value
@public
*/
set<K extends keyof this, T extends this[K]>(key: K, value: T): T;
set<T>(key: string, value: T): T;
/**
Sets a list of properties at once. These properties are set inside
a single `beginPropertyChanges` and `endPropertyChanges` batch, so
observers will be buffered.
```javascript
record.setProperties({ firstName: 'Charles', lastName: 'Jolley' });
```
@method setProperties
@param {Object} hash the hash of keys and values to set
@return {Object} The passed in hash
@public
*/
setProperties<K extends keyof this, P extends {
[Key in K]: this[Key];
}>(hash: P): P;
setProperties<T extends Record<string, unknown>>(hash: T): T;
/**
Convenience method to call `propertyWillChange` and `propertyDidChange` in
succession.
Notify the observer system that a property has just changed.
Sometimes you need to change a value directly or indirectly without
actually calling `get()` or `set()` on it. In this case, you can use this
method instead. Calling this method will notify all observers that the
property has potentially changed value.
@method notifyPropertyChange
@param {String} keyName The property key to be notified about.
@return {Observable}
@public
*/
notifyPropertyChange(keyName: string): this;
/**
Adds an observer on a property.
This is the core method used to register an observer for a property.
Once you call this method, any time the key's value is set, your observer
will be notified. Note that the observers are triggered any time the
value is set, regardless of whether it has actually changed. Your
observer should be prepared to handle that.
There are two common invocation patterns for `.addObserver()`:
- Passing two arguments:
- the name of the property to observe (as a string)
- the function to invoke (an actual function)
- Passing three arguments:
- the name of the property to observe (as a string)
- the target object (will be used to look up and invoke a
function on)
- the name of the function to invoke on the target object
(as a string).
```app/components/my-component.js
import Component from '@ember/component';
export default Component.extend({
init() {
this._super(...arguments);
// the following are equivalent:
// using three arguments
this.addObserver('foo', this, 'fooDidChange');
// using two arguments
this.addObserver('foo', (...args) => {
this.fooDidChange(...args);
});
},
fooDidChange() {
// your custom logic code
}
});
```
### Observer Methods
Observer methods have the following signature:
```app/components/my-component.js
import Component from '@ember/component';
export default Component.extend({
init() {
this._super(...arguments);
this.addObserver('foo', this, 'fooDidChange');
},
fooDidChange(sender, key, value, rev) {
// your code
}
});
```
The `sender` is the object that changed. The `key` is the property that
changes. The `value` property is currently reserved and unused. The `rev`
is the last property revision of the object when it changed, which you can
use to detect if the key value has really changed or not.
Usually you will not need the value or revision parameters at
the end. In this case, it is common to write observer methods that take
only a sender and key value as parameters or, if you aren't interested in
any of these values, to write an observer that has no parameters at all.
@method addObserver
@param {String} key The key to observe
@param {Object} target The target object to invoke
@param {String|Function} method The method to invoke
@param {Boolean} sync Whether the observer is sync or not
@return {Observable}
@public
*/
addObserver<Target>(key: keyof this, target: Target, method: ObserverMethod<Target, this>): this;
addObserver(key: keyof this, method: ObserverMethod<this, this>): this;
/**
Remove an observer you have previously registered on this object. Pass
the same key, target, and method you passed to `addObserver()` and your
target will no longer receive notifications.
@method removeObserver
@param {String} key The key to observe
@param {Object} target The target object to invoke
@param {String|Function} method The method to invoke
@param {Boolean} sync Whether the observer is async or not
@return {Observable}
@public
*/
removeObserver<Target>(key: keyof this, target: Target, method: ObserverMethod<Target, this>): this;
removeObserver(key: keyof this, method: ObserverMethod<this, this>): this;
/**
Set the value of a property to the current value plus some amount.
```javascript
person.incrementProperty('age');
team.incrementProperty('score', 2);
```
@method incrementProperty
@param {String} keyName The name of the property to increment
@param {Number} increment The amount to increment by. Defaults to 1
@return {Number} The new property value
@public
*/
incrementProperty(keyName: keyof this, increment?: number): number;
/**
Set the value of a property to the current value minus some amount.
```javascript
player.decrementProperty('lives');
orc.decrementProperty('health', 5);
```
@method decrementProperty
@param {String} keyName The name of the property to decrement
@param {Number} decrement The amount to decrement by. Defaults to 1
@return {Number} The new property value
@public
*/
decrementProperty(keyName: keyof this, decrement?: number): number;
/**
Set the value of a boolean property to the opposite of its
current value.
```javascript
starship.toggleProperty('warpDriveEngaged');
```
@method toggleProperty
@param {String} keyName The name of the property to toggle
@return {Boolean} The new property value
@public
*/
toggleProperty(keyName: keyof this): boolean;
/**
Returns the cached value of a computed property, if it exists.
This allows you to inspect the value of a computed property
without accidentally invoking it if it is intended to be
generated lazily.
@method cacheFor
@param {String} keyName
@return {Object} The cached value of the computed property, if any
@public
*/
cacheFor<K extends keyof this>(key: K): unknown;
}
const Observable: Mixin;
export default Observable;
}