File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -64,56 +64,6 @@ In most cases, a custom modifier (or even just the component constructor) is
6464a better fit than reaching for these lifecycle modifiers. Below are common
6565patterns 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
11969When you need element access, write a custom modifier with
You can’t perform that action at this time.
0 commit comments