Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc(fast-element): add section on array observation #4128

Merged
merged 3 commits into from
Nov 18, 2020
Merged
Show file tree
Hide file tree
Changes from 2 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 @@ -143,9 +143,38 @@ notifier.subscribe(handler, 'firstName')
notifier.unsubscribe(handler, 'lastName');
```

## Observing Arrays

So far, we've only seen how to observe properties on objects, but it's also possible to observe arrays for changes. Given an instance of an array, it can be observed like this:

**Example: Observing an Array**

```ts
const arr = [];
const notifier = Observable.getNotifier(arr);
const handler = {
handleChange(source: any, splices: Splice[]) {
EisenbergEffect marked this conversation as resolved.
Show resolved Hide resolved
// respond to the change here
// source will be the array instance
// splices will be an array of change records
// describing the mutations in the array in
// terms of splice operations
}
};

notifier.subscribe(handler);
```

There are a couple of important details to note with array observation:

* The `fast-element` library's ability to observe arrays is opt-in, in order that the functionality remain tree-shakeable. If you use a `repeat` directive anywhere in your code, you will be automatically opted in. However, if you wish to use the above APIs and are not using `repeat`, you will need to enable array observation by importing and calling the `enableArrayObservation()` function.
* The observation system cannot track changes made directly through an index update. e.g. `arr[3] = 'new value';`. This is due to a limitation in JavaScript. To work around this, update arrays with the equivalent `splice` code e.g. `arr.splice(3, 1, 'new value');`
* If the array is a property of an object, you will often want to observe both the property and the array. Observing the property will allow you to detect when the array instance is completely replaced on the object, while observing the array will allow you to detect changes in the array instance itself. When the property changes, be sure to unsubscribe to the old array and set up a subscription to the new array instance.
* Observing an array only notifies on changes to the array itself. It does not notify on changes to properties on objects held within the array. Separate observers would need to be set up for those individual properties. These could be set up and torn down in response to changes in the array though.

## Bindings

In addition to watching basic properties, you can also watch arbitrary bindings.
In addition to watching properties and arrays, you can also watch arbitrary bindings.

**Example: Subscribing to a Binding**

Expand Down
2 changes: 2 additions & 0 deletions packages/web-components/fast-element/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export {
export * from "./view";
export * from "./observation/observable";
export * from "./observation/notifier";
export { Splice } from "./observation/array-change-records";
export { enableArrayObservation } from "./observation/array-observer";
export { DOM } from "./dom";
export * from "./directives/behavior";
export * from "./directives/binding";
Expand Down