Component hooks at the route level

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')}}