Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ native arrays with things like a template's `{{#each}}` helper, Ember.js
will have no way to detect changes to the array and the template will
not update as the underlying array changes.

You can restore automatic tracking of changes by replacing your native array with a `TrackedArray` from the 'tracked-built-ins' library.
You can restore automatic tracking of changes by replacing your native array with a `trackedArray` from [@ember/reactive/collections](https://api.emberjs.com/ember/release/modules/@ember%2Freactive%2Fcollections).

```javascript
import { TrackedArray } from '@glimmer/tracking';
import { trackedArray } from '@ember/reactive/collections';

class Ocean {
islands = new TrackedArray(['Oahu', 'Kauai']);
islands = trackedArray(['Oahu', 'Kauai']);

addIsland(newIsland) {
this.islands.push(newIsland);
Expand Down
20 changes: 10 additions & 10 deletions guides/release/in-depth-topics/autotracking-in-depth.md
Original file line number Diff line number Diff line change
Expand Up @@ -276,12 +276,12 @@ Generally, you should try to create classes with their tracked properties
enumerated and decorated with `@tracked`, instead of relying on dynamically
created POJOs. In some cases however, if your usage of properties on POJOs is
too dynamic, you may not be able to enumerate every single property that could
be tracked. In this case, you can use `TrackedObject` from `tracked-built-ins`:
be tracked. In this case, you can use `trackedObject` from [@ember/reactive/collections](https://api.emberjs.com/ember/release/modules/@ember%2Freactive%2Fcollections):

```js
import { TrackedObject } from 'tracked-built-ins';
import { trackedObject } from '@ember/reactive/collections';

let obj = new TrackedObject({
let obj = trackedObject({
a: 1,
b: 2,
})
Expand All @@ -291,29 +291,29 @@ obj.c = 3;
```

All property reading and writing on this object is automatically tracked.
`TrackedObject` is "shallowly" tracked. `obj.c = 4` would be tracked, but
`trackedObject` is "shallowly" tracked. `obj.c = 4` would be tracked, but
`obj.c.somethingDeeper = 5` would not be tracked unless you've also made sure
that the contents of `obj.c` is itself another `TrackedObject`.
that the contents of `obj.c` is itself another `trackedObject`.


#### Arrays

When you want to track the contents of an Array, you can use `TrackedArray` from
`tracked-built-ins`:
When you want to track the contents of an Array, you can use `trackedArray` from [@ember/reactive/collections](https://api.emberjs.com/ember/release/modules/@ember%2Freactive%2Fcollections):


```js
import { TrackedArray } from 'tracked-built-ins';
import { trackedArray } from '@ember/reactive/collections';

class ShoppingList {
items = new TrackedArray([]);
items = trackedArray([]);

addItem(item) {
this.items.push(item);
}
}
```

`TrackedArray` supports all the normal native `Array` methods, ensuring that
`trackedArray` supports all the normal native `Array` methods, ensuring that
their reads and writes are tracked.

## Caching of tracked properties
Expand Down
4 changes: 2 additions & 2 deletions guides/release/services/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ Like any Ember object, a service is initialized and can have properties and meth
Below, the shopping cart service manages an items array that represents the items currently in the shopping cart.

```javascript {data-filename=app/services/shopping-cart.js}
import { TrackedArray } from 'tracked-built-ins';
import Service from '@ember/service';
import { trackedArray } from '@ember/reactive/collections';

export default class ShoppingCartService extends Service {
items = new TrackedArray([]);
items = trackedArray([]);

add(item) {
this.items.push(item);
Expand Down
4 changes: 2 additions & 2 deletions guides/release/typescript/core-concepts/services.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ Let's take this example from elsewhere in the [Ember Guides][example-location]:

```typescript {data-filename="app/services/shopping-cart.ts"}
import Service from '@ember/service';
import { TrackedSet } from 'tracked-built-ins';
import { trackedSet } from '@ember/reactive/collections';

export default class ShoppingCartService extends Service {
items = new TrackedSet();
items = trackedSet();

add(item) {
this.items.add(item);
Expand Down