ember-route-layers
v2.5.3
Published
Wire up your cancel buttons in easy mode.
Downloads
11
Keywords
Readme
Ember-route-layers
Ember Route Layers is used to group routes together and navigate back to past route groups. Its stack of route layers is like a dynamic breadcrumb trail to power your "back" function (e.g. link that says "back", escape key, close icon or cancel button).
For example, take a site where you can get to a set of account pages from anywhere on the site. Grouping these into an "account" route layer lets you click around within the account routes and still have a "back" link which takes you back to wherever you were before you went to your account.
Example: Hierarchical Store + Account and Cart sections
From anywhere on the site, I can go to my account. When I navigate around the account section and then click "back", I want to go wherever I was before I went to the account section: maybe the cart, the store index or a subsection.
From anywhere in the store, if I go to my cart and checkout, exiting takes me back to where I was in the store.
The above example also supports hierarchical navigation within the store: if I go Store > Comics > DC > Marvel, exiting route layers will take me back to Comics and then back to Store.
Ember Route Layers really shines when various different flows use the same route. If I edit billing from the account billing page, exit takes me back to my account page. But if I edit billing during the checkout process, exit will take me back to checkout.
Usage
- Set the
routeLayer
property on your "escapable" routes. - As the user navigates,
service:route-layers
maintains a route layer stack. - The
exitRouteLayer
action takes you back to the previous level in the stack.
Install the addon and all your routes will get an exitRouteLayer
action and routeLayer: 'default'
.
ember install ember-route-layers
Override the routeLayer
property on leaf routes which are "escapable".
routeLayer: 'edit-post',
Now we’re ready to go.
<button {{ action 'exitRouteLayer' }}>Cancel</button>
Using ember-responds-to for escape key support,
escKeypress: function () {
this.send('exitRouteLayer');
}
Notes
In your routes, set routeLayer
to a string identifying a group of related routes which form a navigational "layer" (i.e. the close button behavior is not affected by navigation between them). This often corresponds to what designers call a "flow", though it can be more of a "context" if the navigation is not linear. Leave all your "ground floor" pages (with no close icon or cancel button) with routeLayer: 'default'
(which is set by default).
- The leaf node sets the route layer.
- We use the
afterModel
hook, so don’t forget to callthis._super
. - Aborted transitions are ignored.
- The
exitRouteLayerFallback
action may be overridden to control what happens when a user directly loads and then exits a non-default route layer. - Navigating to a route layer which is already in the stack will take you back down to that layer.