declare module '@ember/object/observable' { /** @module @ember/object/observable */ import Mixin from '@ember/object/mixin'; export type ObserverMethod = | 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(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>( list: L ): { [Key in L[number]]: this[Key]; }; getProperties>( ...list: L ): { [Key in L[number]]: this[Key]; }; getProperties( list: L ): { [Key in L[number]]: unknown; }; getProperties( ...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(key: K, value: T): T; set(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>(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( key: keyof this, target: Target, method: ObserverMethod ): this; addObserver(key: keyof this, method: ObserverMethod): 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( key: keyof this, target: Target, method: ObserverMethod ): this; removeObserver(key: keyof this, method: ObserverMethod): 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(key: K): unknown; } const Observable: Mixin; export default Observable; }