I was recently tasked with making it possible for the users of our app to add site specific bookmarks. So, not bookmarks you add to your browser, but rather bookmarks that you save inside the application. The use case here is primarily to bookmark different kind of filterings of list views, but also being able to bookmark detail views of things that are important for just that one person.

The simple solution here would be to just save window.location.href and be done with it. This is however not ideal because this will force the browser to do a page reload when accessing a bookmark, instead of just regularly transition to the bookmark the Ember way.

So to do it the Ember way we need:

The name of the current route The query params of the current route

So how do we get ahold of those two things? It’s actually simpler than I would have thought. To get the name of the current route we can do this:

const routeName = Ember . getOwner ( this ). lookup ( 'router:main' ). get ( 'currentRouteName' );

Then we also need to get the query params of the current route:

const queryParamKeys = this . controllerFor ( routeName ). get ( 'queryParams' ); let queryParams = {}; for ( var key of queryParamKeys ) { queryParams [ key ] = this . controllerFor ( routeName ). get ( key ); }

Now we got everything we need to be able to construct a POJO that can later be used to transition within Ember. Here’s an example:

// a bookmark object, that might be saved in the db // then passed through an action const myBookmark = { title : 'My most important bookmark' , queryParams , routeName } // in a route action goToBookmark ( bookmark ) { this . transitionTo ( bookmark . routeName , { queryParams : bookmark . queryParams }); }

Here’s a contrived example that unfortunately uses controller actions instead of route actions in this case: ember twiddle