Ember-contextual-back NPM

ember-contextual-back

Provides a contextual back button that can be used to implement native-like navigation stacks.

When trying to implement a navigation stack in Ember it can be tricky to get it right, this addon abstracts all of the implementation details away giving you:

replaceWith support
testability
consistency with browsers' native back button
does not leave the app if there is no history stack
support for one to one, many to one and one to many navigation frames (is that the right word? many r)

Seriously though, as a team we went through about 10 implementations before arriving at this one. If you need a contextual back button I would HIGHLY recommend using this.

Known Issues

Doesn't function on Chrome on iOS. This is becuase replaceWith does not function in iOS, so all links are pushed into the history stack and the back button remains consistitent with this.

Installation

Install the app:

ember install contextual-back

Usage

In the Application route of your ember app add the Mixin:

import Route from '@ember/routing/route';
import ContextualBack from 'ember-contextual-back/mixins/contextual-back';

export default Route.extend(ContextualBack, {

    // Your route code....

});

Then when you want to go back just send the action:

<a {{action 'back'}}>Back</a>

By default the contextual back button keeps a stack of 10 transtions max, to prevent this array becoming overly large for long lived applications. This can be changed by setting maxBuffer to be the desired array size on the application route.

Testing

import stubHistoryBack from 'ember-contextual-back/test-support';

module('Acceptance | browse', function(hooks) {
  setupApplicationTest(hooks);
  stubHistoryBack(hooks);

  test('Some acceptance test', async function() {
      // Code
  });
});

Using Blueprints to avoid boilerplate

A great way to avoid a lot of boilerplate in your acceptance test is to define your own setup-application-test helper that is then called in a custom acceptance-test blueprint. You can see how this works in this repository.

Known Issues

Currently on Google Chorme for iOS this back button does not work, this is due to iOS Chrome not respecting replaceWith and pushing all transitions into the history stack. Once this issue is resolved in Ember this will be fully functional.