Site editor

Video controls

Normal

Component hooks at the route level

Use this templateless component to simulate component UI hooks for route-level templates.

Summary

Route-level controllers and templates don't have useful Component hooks like didInsertElement and willDestroyElement.

You can create a component that calls functions on each of its lifecycle hooks, and use it to wire up Controller actions to these events.

// components/ui-hooks/component.js
import Ember from 'ember';

export default Ember.Component.extend({

  tagName: '',

  'did-insert'() {},
  'will-destroy'() {},

  didInsertElement() {
    this._super(...arguments);

    this.get('did-insert')();
  },

  willDestroyElement() {
    this._super(...arguments);

    this.get('will-destroy')();
  }

});

Now you can use this to invoke Controller actions when a route renders:

{{! home/template.hbs }}
{{ui-hooks
  did-insert=(action 'activateKeyboard')
  will-destroy=(action 'deactivateKeyboard')}}

👋 Hey there, Ember dev!

We hope you enjoyed this free video 🙂

If you like it and want to keep learning with us, we've written a free 6-lesson email course about the fundamental patterns of modern component design in Ember.

To get the first lesson now, enter your best email address below:

You can also check out more details about the course by clicking here.

Questions?

us, or ask in #media on Discord