Git Product home page Git Product logo

ember-route-history's Introduction

Ember-route-history Build Status

This is an Ember-CLI addon. It provides a service which keeps an history of the visited routes. You will be able to know what is the current route, and what was the previously visited routes.

Installation

Using ember-cli:

ember install ember-route-history

Usage

By default, the service is injected into all routes of your application. You can also inject it in any controllers, components or other services.

You need to extend the RouteHistoryMixin in the routes you would like to keep an history of. If you don't use this mixin in a certain route, it won't be tracked.

If you don't want to add this mixin for all your routes, you can simply create a base route that will extend this mixin, then you can extend your base route on all the routes of your application.

import Ember from 'ember';
import RouteHistoryMixin from 'ember-route-history/mixins/routes/route-history';

export default Ember.Route.extend(RouteHistoryMixin, {
    /* Your code here */
});

To use it, in a component for example:

export default Ember.Component.extend({
    routeHistory: Ember.inject.service(),

    onInsert: Ember.on('didInsertElement', function () {
        const currentRouteName = this.get('routeHistory.current'); // Returns the current route name.
        const previousRouteName = this.get('routeHistory.previous'); // Returns the name of the previously visited route.
        const fullRouteHistory = this.get('routeHistory.history'); // Returns an array of route names.
    }
});

By default, only 10 items are saved in the history. You can increase the size of the stack by setting maxHistoryLength.

this.set('routeHistory.maxHistoryLength', 50);

ember-route-history's People

Contributors

jamesdixon avatar localpcguy avatar lolmaus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ember-route-history's Issues

How to use with routes that have dynamic params?

I would like to use this add-on with several routes that include dynamic params, but it seems that this add-on only stores the name of the route without its params. Is there a way to get this information?

properly handle nested routes?

Hello,

Thanks for a great add-on. However, it seems it may have a short-coming in its implementation...

It seems that nested routes are added to the history stack, for example:

if a user visits /top-level/list-of-posts/post/123 as their first page in a session (i.e they have no history), then the history stack will still contain list-of-posts as the previous page (where posts is the current page).

I was hoping I could use this add-on to dynamically show a 'Back' button (like iOS) only where the ember app has pages the browser history, but it seems that it's not possible (because all nested pages will always have a history, even if it's the first page visited in a session).

I'm happy to look into providing a PR if you can give any pointers on how to improve this?

Route history with ID

Currently I can't set an ID in the history, so I can't return to routes that require an ID. I'm thinking that each history item could be an object

{
  routeName: "user",
  id: 10
}

rather than just a routeName, then I could return to that route with the right ID and maintain state.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.