Skip to content

Commit 78a5c8d

Browse files
committed
make did -insert alternative example a bit more useful
1 parent 8625274 commit 78a5c8d

1 file changed

Lines changed: 0 additions & 50 deletions

File tree

README.md

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -64,56 +64,6 @@ In most cases, a custom modifier (or even just the component constructor) is
6464
a better fit than reaching for these lifecycle modifiers. Below are common
6565
patterns and their modern equivalents.
6666

67-
#### Initialization logic → constructor
68-
69-
If your `{{didInsert}}` callback doesn't need the DOM element, move the
70-
logic into the component constructor:
71-
72-
```gjs
73-
import Component from '@glimmer/component';
74-
import { tracked } from '@glimmer/tracking';
75-
76-
export default class MyComponent extends Component {
77-
@tracked count = 0;
78-
79-
constructor(owner, args) {
80-
super(owner, args);
81-
this.count++;
82-
}
83-
84-
<template>
85-
<p>Rendered {{this.count}} time(s)</p>
86-
</template>
87-
}
88-
```
89-
90-
<details>
91-
<summary>With <code>didInsert</code></summary>
92-
93-
```gjs
94-
import Component from '@glimmer/component';
95-
import { tracked } from '@glimmer/tracking';
96-
import { action } from '@ember/object';
97-
import { didInsert } from '@ember/render-modifiers';
98-
99-
export default class MyComponent extends Component {
100-
@tracked count = 0;
101-
102-
@action
103-
incrementCount() {
104-
this.count++;
105-
}
106-
107-
<template>
108-
<div {{didInsert this.incrementCount}}>
109-
Rendered {{this.count}} time(s)
110-
</div>
111-
</template>
112-
}
113-
```
114-
115-
</details>
116-
11767
#### DOM setup on insert → custom modifier
11868

11969
When you need element access, write a custom modifier with

0 commit comments

Comments
 (0)