Ember.js - I want an Action event (on="") to trigger when there is a transition to a new Route

Question

I want an Action event (on="") to trigger when there is a transition to a new Route.

I've seen the list of Action event handlers and closest I could find is attaching the action to the largest HTML element on the page and triggering it with 'Mousemove". This is a terribly flawed away of going about what I want to do.

So just to draw it out.

<div {{action 'displayEitherHtml1or2'}} class="largestDOMelement">
  {{#if showHtml1}}
   // html 1 inside
  {{/if}}
  {{#if showHtml2}}
  // html 2 inside
  {{/if}}
</div>

'/objects' is a list of objects and clicking one leads to 'object/somenumber'. The action should automatically trigger when I enter the 'object/somenumber' page.

UPDATE: I've taken the contents from the previous update and dumped them into my DocRoute, but nothing it being triggered when I transition to 'doc' through {{#link-to 'doc' this.docID}} {{docTitle}}{{/link-to}}

VpcYeoman.DocRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
    toggleLetterSwitch: false,
    togglePermitSwitch: false,
    activate: function () {  
      var docTemplateID = this.get('docTemplateID');
      if ( docTemplateID == 2) {
        this.set('toggleLetterSwitch', true);
        this.set('togglePermitSwitch', false);
        console.log('docTemplateID equals 2');
      } else {
        this.set('toggleLetterSwitch', false);
        this.set('togglePermitSwitch', true);
      }        
    }
});

UPDATE DOS: setDocID is set in the DocsController to 1. Here's the whole thing.

VpcYeoman.DocsController = Ember.ArrayController.extend({ 
  tempDocId: 1, 
  actions: {
    addDoc: function (params) {
      var docTitle = this.get('docTitle');
      var docTemplateID = 1;
      var docTemplateID = this.get('tempDocId');
      console.log(this.get('tempDocId'));
      var store = this.store;
      var current_object = this;
      var doc = current_object.store.createRecord('doc', {
        docTitle:docTitle,
        docTemplateID:docTemplateID
      });
      doc.save();
      return true;
    },
    setDocId: function (param) {
      this.set('tempDocId', param);
      console.log(this.get('tempDocId'))
    },
  }
});

Answer 1

As @fanta commented, it seems like you're looking for the activate hook within your Route. This gets called when you enter the route where you define it. If you want to call it on every transition, you might consider defining a base route for your application and extending that instead of Em.Route:

App.BaseRoute = Em.Route.extend(
    activate: function () {
        // Do your thing
    }
);
App.YourRoutes = App.BaseRoute.extend()

It's possible that there's a more appropriate place/time to do this, but without knowing quite what your action does, this is probably the best guess.

ETA: Looking at your edit, you won't want all your routes to extend App.BaseRoute the way I did it above; you should probably just include that activate hook explicitly in the routes which need it.