Added guide on when and how to reactivity in Views using dot, dynamic, slot#4921
Added guide on when and how to reactivity in Views using dot, dynamic, slot#4921ajeetgill wants to merge 3 commits intodevelopmentfrom
Conversation
…k to other reactive ui md doc
Restructured doc to teach patterns lightest-to-heaviest with human questions as framing, concrete wrong/right examples, and a decision table. Moved source file references to the bottom. Added Further Reading section with real-world examples grouped by pattern.
|
|
||
| ```javascript | ||
| // WRONG — grabs a slot from caseA; if this.data becomes caseB, still watching caseA | ||
| var transactions$ = this.data.transactions$; |
There was a problem hiding this comment.
This is fine if you know that data isn't going to change, or this code is itself inside another dynamic function.
| **When to use it:** Whenever a child component already knows how to display the value. | ||
|
|
||
| ```javascript | ||
| this.start(this.TextField, { data$: this.searchTerm$ }).end(); |
There was a problem hiding this comment.
Even before this, you can just do this.add(this.searchTerm$)
|
|
||
| ### Plain function → `dynamic()` | ||
|
|
||
| `this.add(function(name) { ... })` is syntactic sugar — FOAM calls `dynamic()` on it. So a bare function in `.add()` has the same teardown-and-rebuild behavior. |
There was a problem hiding this comment.
Be careful when doing this without the obj.dynamic() because you might get the wrong 'this'.
if you do this.add(function()...) instead of this.add(self.dynamic(function()...)) then it will look for a 'data' object in the context and if it doesn't find it then it will use the 'this' you called .add() on, which if you have
a nested structure of U3 calls in your render() method may not be the object you expect.
|
|
||
| 2. **`dynamic()` destroys scroll position and component state** | ||
| - Every re-fire tears down the DOM region. Table scroll, input focus, expanded/collapsed state — all lost. | ||
| - If you see flickering, you probably want `dot()` + slot binding instead. |
There was a problem hiding this comment.
Why? .slot() and other other slot features also change the dom, just minimize the amount of HTML you're making dynamic for faster redraws.
2 participants
No description provided.