GlimmerComponent's willDestroy Not Working as Expected

1 
overview.hbs

{{#in-element this.filterContainer}}
    <TimeFilter @id="page-time-filter"/>
{{/in-element}}


timeFilter.js

willDestroy() {
    const element = document.getElementById(this.timePickerId);
    console.log("willDestroy element=> ", element); // Returns null
    if (element) {
        window.MyComponents.datetimerangepicker(element).destroy();
    }
}

In the timeFilter.js willDestroy method, the element returns null. The time filter component’s elements are removed before willDestroy is triggered, so the MyComponents destroy() method cannot be performed. I want to call the MyComponents destroy() method before the component is destroyed.

2

I think you probably want to use a modifier – as modifiers are meant for managing elements, whereas components are more like a compound collection of things – refactoring and encapsulation boundaries, rather than something that is meant for micromanaging its contents.

Modifiers are given the element reference directly, so while the modifier is being destroyed, you are still guaranteed access to that element.

3 Likes
3

Like what @NullVoxPopuli mentioned. This is best use for modifiers. You TimeFilter could look like this:

<div ...attributes {{this.registerDateTimeRangePicker}>
  ...
</div>

import { modifier } from 'ember-modifier';

export default class TimeFilter extends Component {
  registerDateTimeRangePicker = modifier((element) => {
    window.MyComponents.datetimerangepicker(element).register();
    return () => window.MyComponents.datetimerangepicker(element).destroy();
  });
}
1 Like