about.hbs

{{bd-back-button action='goBack'}}

application.js

import Ember from 'ember';
var inject = Ember.inject;

export default Ember.Route.extend({
  history: inject.service(),

  beforeModel: function(transition) {
    // capture the first page load
    this.get('history').capture(transition);
  },

  actions: {
    willTransition: function(transition) {
      this.get('history').capture(transition);
    },

    goBack: function() {
      var previousTransition = this.get('history.previous');
      if (previousTransition) {
        this.get('history').capture(previousTransition);
        previousTransition.retry();
      } else {
        this.transitionTo('home');
      }
    },
  }
}

bd-back-button.hbs

<i class="bd-icon bd-icon--arrow-left"></i>

bd-back-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  classNames: ['button button--return'],
  attributeBindings: ['href', 'title'],

  click: function() {
    this.sendAction();
  }
});

I don't think there is a great way to encapsulate this right now, since you cannot transition in a component right now. Maybe Kevin can think of something?

bus-detective/web-client@bc70a82

Since the goBack action doesn't have anything to do with its parent components, how about moving the action from the route into into the bd-back-button component. You would then need to inject the history service into that component.

When initializing the application route, you could give the service a callback to allow it to use transitionTo from the route, but it seems good to just inject the "-routing" service in the go-back button and use the transitionTo method on that.

Here is an idea giving the history service more responsibility and removing the history concern from the application route. https://gist.github.com/mitchlloyd/9def667b38a8da9558d4