1 | declare module '@ember/object/compat' {
|
2 | import type { ExtendedMethodDecorator } from '@ember/-internals/metal';
|
3 | import type { ElementDescriptor } from '@ember/-internals/metal';
|
4 | /**
|
5 | `@dependentKeyCompat` is decorator that can be used on _native getters_ that
|
6 | use tracked properties. It exposes the getter to Ember's classic computed
|
7 | property and observer systems, so they can watch it for changes. It can be
|
8 | used in both native and classic classes.
|
9 |
|
10 | Native Example:
|
11 |
|
12 | ```js
|
13 | import { tracked } from '@glimmer/tracking';
|
14 | import { dependentKeyCompat } from '@ember/object/compat';
|
15 | import { computed, set } from '@ember/object';
|
16 |
|
17 | class Person {
|
18 | @tracked firstName;
|
19 | @tracked lastName;
|
20 |
|
21 | @dependentKeyCompat
|
22 | get fullName() {
|
23 | return `${this.firstName} ${this.lastName}`;
|
24 | }
|
25 | }
|
26 |
|
27 | class Profile {
|
28 | constructor(person) {
|
29 | set(this, 'person', person);
|
30 | }
|
31 |
|
32 | @computed('person.fullName')
|
33 | get helloMessage() {
|
34 | return `Hello, ${this.person.fullName}!`;
|
35 | }
|
36 | }
|
37 | ```
|
38 |
|
39 | Classic Example:
|
40 |
|
41 | ```js
|
42 | import { tracked } from '@glimmer/tracking';
|
43 | import { dependentKeyCompat } from '@ember/object/compat';
|
44 | import EmberObject, { computed, observer, set } from '@ember/object';
|
45 |
|
46 | const Person = EmberObject.extend({
|
47 | firstName: tracked(),
|
48 | lastName: tracked(),
|
49 |
|
50 | fullName: dependentKeyCompat(function() {
|
51 | return `${this.firstName} ${this.lastName}`;
|
52 | }),
|
53 | });
|
54 |
|
55 | const Profile = EmberObject.extend({
|
56 | person: null,
|
57 |
|
58 | helloMessage: computed('person.fullName', function() {
|
59 | return `Hello, ${this.person.fullName}!`;
|
60 | }),
|
61 |
|
62 | onNameUpdated: observer('person.fullName', function() {
|
63 | console.log('person name updated!');
|
64 | }),
|
65 | });
|
66 | ```
|
67 |
|
68 | `dependentKeyCompat()` can receive a getter function or an object containing
|
69 | `get`/`set` methods when used in classic classes, like computed properties.
|
70 |
|
71 | In general, only properties which you _expect_ to be watched by older,
|
72 | untracked clases should be marked as dependency compatible. The decorator is
|
73 | meant as an interop layer for parts of Ember's older classic APIs, and should
|
74 | not be applied to every possible getter/setter in classes. The number of
|
75 | dependency compatible getters should be _minimized_ wherever possible. New
|
76 | application code should not need to use `@dependentKeyCompat`, since it is
|
77 | only for interoperation with older code.
|
78 |
|
79 | @public
|
80 | @method dependentKeyCompat
|
81 | @for @ember/object/compat
|
82 | @static
|
83 | @param {PropertyDescriptor|undefined} desc A property descriptor containing
|
84 | the getter and setter (when used in
|
85 | classic classes)
|
86 | @return {PropertyDecorator} property decorator instance
|
87 | */
|
88 | export function dependentKeyCompat(
|
89 | target: ElementDescriptor[0],
|
90 | key: ElementDescriptor[1],
|
91 | desc: ElementDescriptor[2]
|
92 | ): PropertyDescriptor;
|
93 | export function dependentKeyCompat(desc: PropertyDescriptor): ExtendedMethodDecorator;
|
94 | }
|