Skip to content

Commit bc0d932

Browse files
committed
docs(listenForBind): update docs to clarify auto-binding
1 parent 5e7f2bf commit bc0d932

1 file changed

Lines changed: 11 additions & 4 deletions

File tree

docs/_guide/actions.md

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,14 +160,21 @@ class HelloWorldElement extends HTMLElement {
160160

161161
### Binding dynamically added actions
162162

163-
Catalyst doesn't automatically bind actions to elements that are dynamically injected into the DOM. If you need to dynamically inject actions (for example you're injecting HTML via AJAX) you can call the `listenForBind` function to set up a observer that will bind actions when they are added to a controller.
164-
165-
You can provide the element you'd like to observe as a first argument which will default to `document`.
163+
Catalyst automatically listens for elements that are dynamically injected into the DOM, and will bind any element's `data-action` attributes. It does this by calling `listenForBind(controller.ownerDocument)`. If for some reason you need to observe other documents (such as mutations within an iframe), then you can call the `listenForBind` manually, passing a `Node` to listen to DOM mutations on.
166164

167165
Batch processing binds events in small batches to maintain UI stability (using `requestAnimationFrame` behind the scenes).
168166

169167
```js
170168
import {listenForBind} from '@github/catalyst'
171169

172-
listenForBind(document)
170+
@controller
171+
class HelloWorldElement extends HTMLElement {
172+
@target iframe: HTMLIFrameElement
173+
174+
connectedCallback() {
175+
// listenForBind(this.ownerDocument) is automatically called.
176+
177+
listenForBind(this.iframe.document.body)
178+
}
179+
}
173180
```

0 commit comments

Comments
 (0)