Helpers that complement @ember/render-modifiers
npm install ember-render-helpers
Use the {{did-insert}}, {{did-update}}, {{will-destroy}} modifiers from [@ember/render-modifiers][render-modifiers] as template helpers.
The original idea came from [this Pre-RFC][pre-rfc].
[render-modifiers]: https://github.com/emberjs/ember-render-modifiers#readme
[pre-rfc]: https://github.com/emberjs/rfcs/issues/484
``
ember install ember-render-helpers
<template> tag? ✨
- Update your template registry to extend this addon's. Check the Glint documentation for more information.
`ts
import '@glint/environment-ember-loose';
import type EmberRenderHelpersRegistry from 'ember-render-helpers/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberRenderHelpersRegistry, / other addon registries / {
// local entries
}
}
`
- In a tag, use the named import to consume the helpers.
`ts
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { didInsertHelper } from 'ember-render-helpers';
export default class HelloComponent extends Component {
@action sayHello() {
console.log('Hello!');
}
{{didInsertHelper this.sayHello}}
}
`
ember-render-helpers provides 3 helpers. To avoid name conflicts with @ember/render-modifiers, these helpers are suffixed with -helper.
- {{did-insert-helper}}
-
-
All helpers expect a callback function as the 1st positional argument. You can pass parameters to this callback function as subsequent positional arguments, as named arguments, or using both.
`hbs`
{{did-insert-helper this.sayHello "Zoey"}}
`ts
import Component from '@glimmer/component';
import type { NamedParameters, PositionalParameters } from 'ember-render-helpers';
export default class HelloComponent extends Component {
@action sayHello(positional: PositionalParameters, _named: NamedParameters) {
const name = positional[0] as string;
console.log(Hello, ${name}!);`
}
}
Clicking the Toggle button will toggle the isVisible flag. When it switchestrue
to , onDidInsert will be called, because the {{did-insert-helper}} helper isfalse
inserted. When it switches to , onWillDestroy will be called, because{{will-destroy-helper}}
the helper is removed.
Clicking the Random button will set randomValue to a new random value. EveryisVisible
time this happens, while is true, onDidUpdate will be called,{{did-update-helper}}
because one of the parameters passed to the helper was updated.
Clicking the Random button _does not_ cause {{did-insert-helper}} or{{will-destroy-helper}} to call onDidInsert and onWillDestroy, since these
helpers are not triggered by parameter updates.
`hbs
{{#if this.isVisible}}
{{did-insert-helper this.onDidInsert 1 2 3 this.randomValue foo="bar" qux="baz"}}
{{will-destroy-helper this.onWillDestroy 1 2 3 this.randomValue foo="bar" qux="baz"}}
{{did-update-helper this.onDidUpdate 1 2 3 this.randomValue foo="bar" qux="baz"}}
{{/if}}
`
`ts
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
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
@action
onWillDestroy(positional: unknown[], named: Record
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
@action
onDidUpdate(positional: unknown[], named: Record
console.log({ positional, named });
// => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
}
}
``
- Ember.js v4.12 or above
- Node.js v20 or above