ember-render-helpers
@ember/render-modifiers
as template helpers:
{{did-insert}}
, {{did-update}}
, {{will-destroy}}
The original idea came from this Pre-RFC.
Installation
ember install ember-render-helpers
Usage
Example
Clicking the Toggle
button will toggle the isVisible
flag. When it switches
to true
, onDidInsert
will be called, because the {{did-insert}}
helper is
inserted. When it switches to false
, onWillDestroy
will be called, because
the {{will-destroy}}
helper is removed.
Clicking the Random
button will set randomValue
to a new random value. Every
time this happens, while isVisible
is true
, onDidUpdate
will be called,
because one of the parameters passed to the {{did-update}}
helper was updated.
Clicking the Random
button does not cause {{did-insert}}
or
{{will-destroy}}
to call onDidInsert
and onWillDestroy
, since these
helpers are not triggered by parameter updates.
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked isVisible = false;
@tracked randomValue?: number;
@action
toggleVisibility() {
this.isVisible = !this.isVisible;
}
@action
rollTheDice() {
this.randomValue = Math.random();
}
@action
onDidInsert(positional: unknown[], named: Record<string, unknown>) {
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
@action
onWillDestroy(positional: unknown[], named: Record<string, unknown>) {
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
@action
onDidUpdate(positional: unknown[], named: Record<string, unknown>) {
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
}