ember-recorded-history
NOTE! This is still alpha, I probably shouldn't have released 1.0 yet...
Known issues:
- NO query param support
- Buggy when navigating from one route to a previous instance of the same route.
Ever wanted to have some logic depend on the user's navigation history in your app?
After submitting a form, you could redirect the user to where they were before.
Or a details route, where you cycle through many models, could offer a close button which returns to the last different route they were on.
Note: I've never tested this with Ember.HashLocation
. If you try it, or
would like to help ensure a graceful fallback behavior, please let me
know! I'm available on the Ember Community
Slack.
Installation
ember install ember-recorded-history
- Include the router mixin, and use the
tracking-history
location:
// app/router.js
import Ember from 'ember';
import config from './config/environment';
import { HistoryMixin } from 'ember-recorded-history';
const Router = Ember.Router.extend(HistoryMixin, {
location: 'tracking-history',
rootURL: config.rootURL
});
Router.map(function() {
// ...
});
export default Router;
Docs
HistoryEntries
A HistoryEntry
represents a unique visit to a route. It has 4 properties:
-
path
: The path of the route, as shown in the URL bar (e.g. "/photos/4") -
route
: The dot-separated route name, as you'd pass tolink-to
(e.g. "photos.show") -
uuid
: A unique identifier which distinguishes multiple visits to the same route. -
params
: An array of params for routes with dynamic segments
recorded-history
service
The The service provides 5 main properties:
-
currentEntry
: AHistoryEntry
representing the current route. This can be leveraged to store state associated with this route. -
pastEntries
: An array ofHistoryEntries
, oldest to most recent. These are where the user would end up if they used the back button. -
futureEntries
: An array ofHistoryEntries
, from closest to furthest in the future. These are where the user would end up if they used the forward button. -
entries
: All history entries. Equivalent topastEntries.concat(currentEntry, futureEntries)
. -
position
: The index of the current history entry.currentEntry
is equivalent toentries[position]
.
The service also provides 2 useful methods:
-
returnTo(entry)
: Transition to an existing history entry, without modifying the history. As if the user pressed the back/forward buttons to return to that route. -
transitionTo(entry)
: Transition to the specified state, as if the user navigated directly there. This discards future entries, and creates a new entry for the passed route.
TODO
Components
It would be nice to have a version of link-to
that can take a
HistoryEntry
.
Check replace support
This probably doesn't work correctly with replaceWith
Query param support
Check with replace: true
Usage Example
Inject the recorded-history
service into wherever you'd like to use
it:
// photos/view/controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
history: Ember.inject.service('recorded-history'),
previousRoute: Ember.computed('history.pastEntries.[]', function() {
return this.get('history.pastEntries')
.rejectBy('route', 'photos.view')
.get('lastObject');
}),
actions: {
returnToPrevious() {
this.get('history').returnTo(this.get('previousRoute'));
}
}
});