Allow programmatic control of observation #397
Conversation
Add a named new argument, `isObserving`, with a default value of
`true`, which users can pass to explicitly opt into or out of observing
an element at a given time. This allows for a declarative invocation of
the modifier itself based on tracked state, rather than having to handle
it in the callback(s) passed to the modifier.
Users can work around this today by only passing the `onEnter` or
`onExit` callbacks conditionally:
<div
{{did-intersect
onEnter=(if this.shouldDoSomething this.doSomething no-op)
onExist=(if this.shouldDoSomething this.doSomethingElse no-op)
}}
>
However, as this example shows, this is repetive (and potentially
error- prone). The new functionality allows a less error-prone, less
repetitive, more expressive approach:
<div
{{did-intersect
isObserving=this.shouldDoSomething
onEnter=this.doSomething
onExit=this.doSomethingElse
}}
>
Resolves elwayman02#396
|
|
||
| module('modifier accepts `isObserving` argument', function () { | ||
| test('with a truth(y) value', async function (assert) { | ||
| assert.expect(2); |
There was a problem hiding this comment.
Prefer not to use assert.expect for tests where the assertions are always called synchronously rather than in callbacks. This makes the tests brittle to change without adding a lot of value, in my experience.
(Yes, I know a few of those snuck through above. I missed them in previous reviews :( )
There was a problem hiding this comment.
We can fix this in another PR, since it needs to be updated everywhere.
There was a problem hiding this comment.
Heh, I am 100% in agreement; I added it solely to match the existing tests I saw. 😅
|
@chriskrycho can you add an example to the demo app and update the docs to include this option? I'm thinking maybe you could add a button to the existing example that toggles observing on and off and renders the current state of the toggle to the user? |
|
Happy to! Will push changes to that effect shortly. |
|
The demo looks great! |
Add a named new argument,
isObserving, with a default value oftrue, which users can pass to explicitly opt into or out of observing an element at a given time. This allows for a declarative invocation of the modifier itself based on tracked state, rather than having to handle it in the callback(s) passed to the modifier.Users can work around this today by only passing the
onEnteroronExitcallbacks conditionally:However, as this example shows, this is repetive (and potentially error- prone). The new functionality allows a less error-prone, less repetitive, more expressive approach:
Resolves #396